所以我正在开设一个图库,图片以200x200px的列表项目显示
#gallery-list-ui li {
display: block;
margin: 10px;
height: 200px;
width: 200px;
overflow: hidden;
}
为了让肖像/风景图像使用整个高度/宽度,我使用javascript来决定是否应将高度或宽度设置为100%。
var portrait = ($img.height() > $img.width() ? true : false);
if(portrait){
$img.css({'width' :'100%', 'height' : 'auto'});
} else {
$img.css({'height' :'100%', 'width' : 'auto'});
}
结果是肖像图像正确缩放
<img src="img.jpg" style="width: 100%; height: auto;">
但是风景图像会缩放其原始高度的100%,并且不限于列表框的高度。
<img src="img.jpg" style="height: 100%; width: auto;">
我在这里缺少什么?任何人都可以解释为什么会这样吗? 在这里看到我的小提琴:https://jsfiddle.net/smyhbckx/5/
答案 0 :(得分:5)
将高度添加到.img-container:
.img-container{
height: 100%;
}
CSS高度非常严格。它基于元素的直接父母的身高。 img的直接父级是.img-container
- 它没有高度(意思是height: auto;
)。解析器将此识别为未知数字,因此您的img高度不会缩放。
答案 1 :(得分:1)
尝试使用图片上的object-fit:cover;height:100%
属性,并将以下样式添加到容器
.img-container {
width: 200px;
height: 200px;
}
我希望这能解决你的问题