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