1

如果将以下网页代码加载到 Chrome（和智能手机）中，每次视口越过 440px 断点时，img 都会出现非常奇怪的收缩行为。您可以通过反复调整 Chrome 浏览器的大小来复制该问题，然后再将其宽度调整为大于 440 像素，或者在智能手机上通过在纵向和横向之间来回切换来复制该问题。当您多次执行此操作直到图像变得如此之小以至于几乎消失时，这实际上非常有趣！哈哈！

任何人都知道是什么导致了这种奇怪的行为以及解决方法？值得注意的是，它不会在 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>
4

1 回答 1

2

哈！，这是一个有趣的效果。要修复它，请使用max-width而不是width：

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

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

于 2012-10-25T19:56:46.807 回答