Image aspect ratio is preserved in Firefox, Chrome, and mobile Safari—but not in desktop Safari

Question

My images are set with different aspect ratios, such as 4:3, 3:4, 3:3, 2:3, and 16:9. I therefore don't set a fixed aspect ratio in the CSS. Instead, I set a max-height: 94vh. That way, the images will fit the screen neatly.

I apply this CSS when the image is clicked—when it has the active class:

li.container {
  display: inherit;
  background-color: var(--fallback);
}

li.container:hover {
  cursor: pointer;
}

li.container.active {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.9);
}

li.container.active img {
  max-height: 94vh;
  background: none;
}

I use Gatsby with the gatsby-plugin-image. Here's an example image li:

<li class="Photo-module--container--7f2bd active" tabindex="0" role="button">
  <div
    data-gatsby-image-wrapper=""
    class="gatsby-image-wrapper gatsby-image-wrapper-constrained"
  >
    <div style="max-width: 3717px; display: block">
      <img
        alt=""
        role="presentation"
        aria-hidden="true"
        style="max-width: 100%; display: block; position: static"
      />
    </div>
    <div
      aria-hidden="true"
      data-placeholder-image=""
      style="opacity: 0; transition: opacity 500ms linear 0s; object-fit: cover"
    ></div>
    <picture>
      <source type="image/webp" sizes="(min-width: 3717px) 3717px, 100vw" />
      <img
        data-main-image=""
        style="object-fit: cover; opacity: 1"
        sizes="(min-width: 3717px) 3717px, 100vw"
        decoding="async"
        loading="lazy"
        src="/static/7056e98c21e47b0856022508014b51ca/d3da5/DSCF3885.jpg"
        alt="Vannassen, Vassåsveien, Stavanger, 2023-02-11"
        width="3717"
        height="4956"
      />
    </picture>
    <noscript>
      <picture>
        <source type="image/webp" sizes="(min-width: 3717px) 3717px, 100vw" />
        <img
          width="3717"
          height="4956"
          data-main-image=""
          style="object-fit: cover; opacity: 0"
          sizes="(min-width: 3717px) 3717px, 100vw"
          decoding="async"
          loading="lazy"
          src="/static/7056e98c21e47b0856022508014b51ca/d3da5/DSCF3885.jpg"
          alt="Vannassen, Vassåsveien, Stavanger, 2023-02-11"
        />
      </picture>
    </noscript>
  </div>
  <!-- button with absolute position -->
</li>

This works fine in all browsers except for desktop Safari.

In Firefox, for instance:

But in desktop Safari, this happens:

It seems desktop Safari respects the max-height: 94vh, but it doesn't respect the aspect ratio. It just zooms in all the way.

Why?

Answer 1

for fix aspect ratio in safari desktop we can use object-fit css property :

li.container.active img {
  object-fit: contain !important;
}