安卓， Chrome 。横向影响最大宽度图像的 URL 地址栏

Question

我有一个简单的大图像，我想适应屏幕的宽度。该图像大约有 1600 像素宽，并且具有 max-width:100%; 属性，因此它应该始终适合屏幕。

这个问题出现在android的Chrome浏览器上，当URL栏向下滑动时，滚动后，图片不再是100%，并且偏移了一个%或2。只有在设备是横向时才会出现，纵向模式是可以的.

影响图片缩放的地址栏是什么？

编辑:如果 max-height/width 考虑了包括地址栏在内的屏幕空间，如何获得与使用 max-width/height 相同的响应式图像效果。

CSS

div.lndContainer {
    max-height:750px;
    max-width:1600px;
    position:relative;
    overflow:hidden;
    margin-top:50px;
}
div.lndContainer img {
    max-width:100%;
    max-height:100%;
}

HTML

<div class="lndContainer">
    <img width="1600" height="750" src="http://lart.co.uk/wordpress/wp-content/uploads/2013/10/cats-q-g-1600-750-6.jpg" />
</div>

Answer 1

这是因为 max-height/max-width 与网页的实际空间有关(在本例中是没有 url 栏的空间)。

为什么？如果你想使用位于 View 顶部或底部的固定元素 (css-> position:fixed;)，一个最小化的视口(viewport)，因为 urlbar 在那里会导致你再也看不到顶部或底部元素，无法通过滚动显示。