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

Posted 2023-03-05

【中文标题】iOS中的Flex图像，使图像宽度均匀

【英文标题】：Flex images in iOS, make images even width

【发布时间】：2019-06-28 21:05:12

【问题描述】：

如何在 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"   />
<img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg"   />
<img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg"   />
<img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg"   />
<img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg"   />
<img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg"   />
</div>

这是它在 Firefox 中的外观 你如何在 iOS 中做到这一点？

这是它在 Firefox 中的响应方式，希望在 iOS 中实现相同的效果。

【问题讨论】：

它在 ios 上的显示效果如何？

图片以全宽显示，因此太宽了。

你试过display: -webkit-box;或display: -webkit-flex;吗？

【参考方案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"  >
  <img src="https://i.imgur.com/SLZv3Yu.jpg"  >
  <img src="https://i.imgur.com/eQ6LawW.jpg"  >
  <img src="https://i.imgur.com/0W3B4ce.jpg"  >
  <img src="https://i.imgur.com/7jGyI95.jpg"  >
  <img src="https://i.imgur.com/oFhKzAZ.jpg"  >
</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>

【参考方案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"   /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg"   /></div>
<div class="product"><img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg"   /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg"   /></div>
<div class="product"><img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg"   /></div>
<div class="product"><img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg"   /></div>
</div>

此解决方案在 Firefox、Chrome（Linux 上的桌面）和 iOS Safari 版本 11（在 browserstack 上检查）上有效并经过测试。

【讨论】：

您是在电脑还是移动设备（即：ipad 或 iphone）上测试 Firefox 和 Chrome？

我在桌面 Chrome 和桌面 Firefox（都在 Linux 上）以及移动 Safari o iOS 版本 11 在 browserstack 上进行了测试。

好的。您是否尝试过在元标记中设置设备宽度？

我认为这没有必要，因为它在 codepen 和 *** sn-p 引擎上都可以正常工作，而且它们都没有设置元标记。它应该没有任何效果。

【参考方案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"   />
<img src="https://nomadweb.design/img/phone-frame-ilioslighting.jpg"   />
<img src="https://nomadweb.design/img/imac-frame-mallachandcompany.jpg"   />
<img src="https://nomadweb.design/img/phone-frame-mallachandcompany.jpg"   />
<img src="https://nomadweb.design/img/imac-frame-bighousesound.jpg"   />
<img src="https://nomadweb.design/img/phone-frame-bighousesound.jpg"   />
</div>

【讨论】：

这不是想要的结果，需要将所有图像放在 1 行，均匀放置。

在% 中添加图像width。并给外divwidth:100%

使每张图像的宽度相同并扭曲比例。 iOS 或 Safari 好像不支持自动宽度？

@drooh 你想为每张图片设置不同的尺寸吗？？

是的，在 Firefox 和 Chrome 中它是这样工作的。它保持图像比例