Bug 259437

Created attachment 467094 [details]
safari screenshot

In this tutorial: https://blog.logrocket.com/responsive-image-gallery-css-flexbox/

In this section: Maintaining image aspect ratios in a responsive image gallery

It shows using an HTML structure like this:

```html
<div class="container">
  <!-- heading text -->
  <ul class="image-gallery">
    <li>
      <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
      <div class="overlay"><span>Image title</span></div>
    </li>
    <!-- other items here -->
  </ul>
</div>
```

With CSS like this:

```css
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-gallery > li {
  height: 300px;
  cursor: pointer;
  position: relative;
  flex: 1 1 auto;
}

.image-gallery li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 5px;
}
```

You can view a live demo here: https://sts6l7.csb.app/

In Chrome, it displays as intended, and as shown on https://blog.logrocket.com/responsive-image-gallery-css-flexbox/

In desktop Safari, it displays very differently, like the attachment, where each image stretches the full width of the container, with the images stacked vertically.