img {max-height:%} 在 chrome 中失败

Question

我编写了一个水平滚动照片库，其中图像根据视口大小缩放。我将图像的内联列表与 img{max-height: 68%} 结合使用。这在 Safari 中运行良好，但在 Chrome 和 Firefox 中失败。我四处走动并尝试了很多事情（主要是在具有 CSS 大小属性的图像周围创建 div），但是没有任何解决方法。

这是我的 HTML:

    <div class="images">
        <ul>
            <li><img src="images/01_P1030278_web.jpg"/></li>
        </ul>
    </div>

这里是 CSS:

.images{position:relative; float:left; margin:8em 0 0 14.5em; z-index:-100;}

ul{overflow:-moz-scrollbars-none; white-space:nowrap; line-height:0; font-size: 0;}

ul li{display:inline; padding:20px;}

ul li img{max-height:68%;}

在 Chrome 和 Firefox 中，无论视口大小如何，图像都显示为全尺寸，因此流出容器，完全破坏了设计。

我很困惑，非常感谢任何帮助！

提前致谢....

Answer 1

试试这个：

.images{position:relative; float:left; margin:8em 0 0 14.5em; z-index:-100;}

ul{overflow:-moz-scrollbars-none; white-space:nowrap; line-height:0; font-size: 0;}

ul li{display:inline; padding:20px;}

ul li img{max-height:68vh;}

此外，如果你需要将其限制为一维，但又保持纵横比，你可以使用：

    ul li img{max-height:68vh; width:auto;}

希望对您有所帮助！

img {max-height:%} 在 chrome 中失败

img {max-height:%} fails in chrome

css

html

google-chrome

responsive-images