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>