[英]img {max-height:%} fails in chrome
I have coded a horizontal scrolling photo gallery wherein the images scale based on the viewport size. 我已经编码了一个水平滚动的相册,其中图像根据视口大小进行缩放。 I am using an inline list for the images in combination with an
img{max-height: 68%}
. 我将图像的内联列表与
img{max-height: 68%}
。 This works great in Safari and fails in Chrome and Firefox. 这在Safari中效果很好,而在Chrome和Firefox中则失败。 I've kicked around and tried a number of things (mostly creating divs around the images with CSS size attributes), however nothing has worked as a fix.
我已经尝试了很多方法(主要是使用CSS size属性在图像周围创建div),但是没有任何解决办法。
Here is my HTML: 这是我的HTML:
<div class="images">
<ul>
<li><img src="images/01_P1030278_web.jpg"/></li>
</ul>
</div>
And here is the CSS: 这是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%;}
In Chrome and Firefox the images appear full-sized regardless of viewport size and therefore flow outside of their containers, completely breaking the design. 在Chrome和Firefox中,无论视口大小如何,图像都会显示为全尺寸,因此会从其容器中流出,从而完全破坏了设计。
Any help will be much appreciated as I am flummoxed! 我不知所措,任何帮助将不胜感激!
Thanks in advance.... 提前致谢....
Try this: 尝试这个:
.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;}
Furthermore, if you need to constrain it to one dimension, but have it maintain aspect ratio, you can use: 此外,如果您需要将其限制为一维,但要保持宽高比,则可以使用:
ul li img{max-height:68vh; width:auto;}
Hope that helps! 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.