iOS中的Flex图像，使图像宽度均匀

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

方法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 2

我找到了一个有效的解决方案 - 如果你不介意稍微更改标记，那么我建议将每个图像包装在另一个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（Linux上的桌面）和iOS Safari版本11（在browserstack上检查）上运行并进行测试。

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>