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

我编写了一个水平滚动照片库，其中的图像根据视口大小进行缩放。我将图像的内联列表与

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>

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

任何帮助都将不胜感激，因为我很困惑

提前谢谢

试试这个：

.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;}

---

希望有帮助

很清楚！因为你在使用

percent使用
vh
或
vw
而不是
%
哇！非常感谢，这很有魅力。有趣的是，在我发布之前阅读的所有线程中，都没有提到使用vh而不是%。这是一个较新的参数，因为我相信它只适用于IE9及更高版本，但你现在应该能够捕获至少80-85%的浏览器。在接下来的一年里，它应该会更大。
    ul li img{max-height:68vh; width:auto;}