Question

如果您将以下网页代码加载到Chrome（和智能手机）中，那么每次视口越过440px断点时，img上都会出现非常奇怪的缩小行为。您可以通过反复调整较小且大于440px宽的Chrome浏览器，或通过在纵向和横向之间来回切换在智能手机上来复制问题。当你多次这样做时，它实际上非常有趣，直到图像变得如此之小，它才真正消失！ LOL！

任何人都知道造成这种奇怪行为的原因是什么？值得注意的是，它不会发生在FireFox中。

<!doctype html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <style>
    #supported-payment-options li {
      float:left;
      list-style:none;
    }
    @media (max-width: 679px) {
      img.retina-zoom { width:75%; }
    }
    @media (max-width: 440px) {
    }
  </style>
</head>
<body>

<ul id="supported-payment-options">
    <li><img class="retina-zoom" src="https://si0.twimg.com/profile_images/1695501054/book-responsive_reasonably_small.gif"></li>
</ul>

</body>
</html>

Answer 1

哈哈！这是一个有趣的效果。要解决此问题，请使用max-width而不是width：

@media (max-width: 679px) {
  img.retina-zoom { max-width:75%; }
}

编辑：请注意，这不会发生在最新的Webkit Nightly中，所以也许这是一个已修复的错误。

媒体查询和百分比宽度会导致webkit浏览器出现奇怪的IMG缩小行为

1 个答案: