IOS拉伸图像

Question

我的网站上有一个徽标。代码如下：

footer .logo {
  margin: 1px auto 26px auto;
  width: 150px;
}

<footer>
  <div id="footer" class="container">
    <div class="row">
      <img class="logo" src="logo.png">
    </div>
  </div>
<!-- more content here -->
</footer>

为了这个问题，我用香蕉代替了标志。

在桌面、android 和模拟 ios 设备上看起来不错： what the image should look like 但是在真实的 ios 设备中会发生一些在模拟器中不会发生的事情： what it looks like on an actual ios device

似乎在 IOS 设备上，图像以某种方式放大，然后压缩到 150 像素的宽度。奇怪的是，这是网站上所有图像中唯一具有这种行为的图像。

您知道造成这种情况的原因或解决方法吗？

Answer 1

试试max-width

footer .logo {
  margin: 1px auto 26px auto;
  max-width: 150px;
}

Answer 2

原来div.row 和display: flex 一样是罪魁祸首。更改为display: block 修复了它。