Сгибайте изображения в iOS, делайте изображения равными по ширине

Question

Как мне добиться этого в iOS?В Firefox он работает, но не может найти решение для iPad.

<style>
#products {
    display: flex;
}
#products img {
    width: auto !important;
    height: auto !important;
}
</style>

<div id="products">
<img src="https://nomadweb.design/img/imac-frame-ilioslighting.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg" width="406" height="815" />
</div>

Вот как это выглядит в Firefox Как это можно сделать в iOS?

Вот как это отзывчиво в Firefox, хотелось быдобиться того же с iOS.

Answer 1

Я нашел рабочее решение - если вы не возражаете немного изменить разметку, то я бы предложил обернуть каждое изображение в другой div, установить его min-width: 0 и заставить изображения полностью использовать то, что содержит div:

<style>
#products {
    display: flex;
}
#products img {
    width: 100% !important;
    height: auto !important;
}
.product {
  min-width: 0;
}
</style>

<div id="products">
<div class="product"><img src="https://nomadweb.design/img/imac-frame-ilioslighting.jpg" width="980" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg" width="406" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg" width="980" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg" width="406" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg" width="980" height="815" /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg" width="406" height="815" /></div>
</div>

Это решение работает и было протестировано на Firefox, Chrome (Desktop для Linux) и iOS Safari версии 11 (проверено в стеке браузера).

Answer 2

Подход 1: Обязательно установите внутренние размеры (натуральный размер) изображений в разметке, чтобы сохранить пропорции.

#products {
  display: flex;
}

#products img {
  min-width: 0;
  max-width: 100%;
  height: 100%;
}

<div id="products">
  <img src="https://i.imgur.com/5fhlNOd.jpg" width="980" height="815">
  <img src="https://i.imgur.com/SLZv3Yu.jpg" width="406" height="815">
  <img src="https://i.imgur.com/eQ6LawW.jpg" width="980" height="815">
  <img src="https://i.imgur.com/0W3B4ce.jpg" width="406" height="815">
  <img src="https://i.imgur.com/7jGyI95.jpg" width="980" height="815">
  <img src="https://i.imgur.com/oFhKzAZ.jpg" width="406" height="815">
</div>

Подход 2: Добавьте обертку к каждому изображению, размеры не обязательны.

#products {
  display: flex;
}

#products img {
  width: 100%;
  height: auto;
}

<div id="products">
  <div><img src="https://i.imgur.com/5fhlNOd.jpg"></div>
  <div><img src="https://i.imgur.com/SLZv3Yu.jpg"></div>
  <div><img src="https://i.imgur.com/eQ6LawW.jpg"></div>
  <div><img src="https://i.imgur.com/0W3B4ce.jpg"></div>
  <div><img src="https://i.imgur.com/7jGyI95.jpg"></div>
  <div><img src="https://i.imgur.com/oFhKzAZ.jpg"></div>
</div>

Answer 3

добавлено flex-wrap: wrap; это приведет к выводу изображений на следующей строке, если они не помещаются в div.Надеюсь это поможет.спасибо

#products {
    display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
#products img {
    width: auto !important;
    height: auto !important;
}

<div id="products">
<img src="https://nomadweb.design/img/imac-frame-ilioslighting.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg" width="406" height="815" />
<img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg" width="980" height="815" />
<img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg" width="406" height="815" />
</div>