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中失败

1 个答案: