如果将以下网页代码加载到 Chrome(和智能手机)中，每次视口(viewport)越过 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>
最佳答案
哈!这是一个有趣的效果。要修复它，请使用 max-width 而不是 width:
@media (max-width: 679px) {
img.retina-zoom { max-width:75%; }
}
编辑:请注意，这不会发生在最新的 Webkit Nightly 中。所以也许这是一个已修复的错误。
关于css - 媒体查询和百分比宽度导致 webkit 浏览器出现奇怪的 IMG 收缩行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13076120/