pinafore/routes/_components/dialog/components/ImageDialog.html

<ModalDialog
  {id}
  {label}
  background="var(--muted-modal-bg)"
  muted="true"
  className="image-modal-dialog"
>
  {#if type === 'gifv'}
    <video
      class="image-modal-dialog-autoplay-video"
      aria-label="Animated GIF: {description || ''}"
      style="background-image: url({poster}); "
      {width}
      {height}
      {src}
      autoplay
      muted
      loop
      webkit-playsinline
      playsinline
    />
  {:else}
    <img
      {src}
      {width}
      {height}
      alt={description || ''}
      title={description || ''}
    />
  {/if}
</ModalDialog>
<style>
  :global(.image-modal-dialog img, .image-modal-dialog video) {
    object-fit: contain;
    max-width: calc(100vw - 20px);
    max-height: calc(100% - 20px);
    overflow: hidden;
  }

  .image-modal-dialog-autoplay-video {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

</style>
<script>
  import ModalDialog from './ModalDialog.html'
  import { show } from '../helpers/showDialog'
  import { oncreate } from '../helpers/onCreateDialog'

  export default {
    oncreate,
    components: {
      ModalDialog
    },
    methods: {
      show
    }
  }
</script>