pinafore/routes/_components/dialog/ImageDialog.html

<ModalDialog :label
             :shown
             background="var(--muted-modal-bg)"
             muted="true"
             className="image-modal-dialog"
             on:destroyDialog="destroy()"
>
  {{#if type === 'gifv'}}
    <AutoplayVideo
      ariaLabel="Animated GIF: {{description || ''}}"
      :poster
      :src
      :width
      :height
    />
  {{else}}
    <img
      src="{{src}}"
      width="{{width}}"
      height="{{height}}"
      alt="{{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;
  }
</style>
<script>
  import ModalDialog from './ModalDialog.html'
  import AutoplayVideo from '../AutoplayVideo.html'

  export default {
    components: {
      ModalDialog,
      AutoplayVideo
    },
    methods: {
      async show() {
        this.set({shown: true})
      }
    }
  }
</script>