在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

方法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（已在浏览器堆栈上选中）上进行了测试。

Answer 3

添加了num_iterations，如果flex-wrap: wrap;中不合适，则会在下一行显示图像。希望这可以帮助。谢谢

div

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