0

我编写了一个水平滚动照片库,其中图像根据视口大小进行缩放。我将图像的内联列表与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 中,无论视口大小如何,图像都会显示为全尺寸,因此会在其容器之外流动,完全破坏了设计。

任何帮助将不胜感激,因为我很困惑!

提前致谢....

4

1 回答 1

0

尝试这个:

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

希望有帮助!

于 2016-02-16T06:24:27.287 回答