所以我正在开发一个图库,图片显示在一个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'}); }
结果是肖像图像正确缩放
但是风景图像缩放其原始高度的100%,并且不限于列表框的高度.
我在这里错过了什么?任何人都可以解释为什么会这样吗?请看我的小提琴:https://jsfiddle.net/smyhbckx/5/
将高度添加到.img-container:
.img-container{ height: 100%; }
CSS高度非常严格.它基于元素的直接父母的身高.img的直接父级是.img-container
- 它没有高度(含义height: auto;
).解析器将此识别为未知数字,因此您的img高度不会缩放.