Javascript 为什么不是'；我的图像高度缩放是否正确？

因此，我正在制作一个图库，其中图像显示在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;">

我错过了什么？有人能解释为什么会这样吗？

---

请看我的小提琴：

尝试使用

对象匹配：封面；高度：图像上的100%

属性，并将以下样式添加到容器中

.img-container {
    width: 200px;
    height: 200px;
}

我希望这能解决你的问题

---

为.img容器添加高度：

.img-container{
    height: 100%;
}

---

CSS高度非常严格。它基于元素的直接父元素的高度。img的直接父级是

.img容器

——它没有高度（意思是

高度：自动；

）。解析器将其识别为一个未知数字，因此您的img高度不会被缩放。

您的即时

img

元素的父容器似乎没有定义的

高度

，因此不会停止

img

完全显示

高度

，但

宽度

工作，即使未设置，作为一个

div

默认值为100%。。。将高度和宽度添加到

img容器

工作正常。但是为什么一开始它只适用于宽度而不适用于高度呢？因为网页被设计成主要垂直流动（正如你可以注意到的那样，你的鼠标只有一个垂直滚动条）。大多数元素的高度设计为尽可能“流动”，而宽度大多有限。您可以在

display:block元素，默认为父元素宽度的100%，同时允许灵活的高度。唯一的区别是
width:autovs
高度：自动。当图像尝试与其父宽度进行比较时，发现其父宽度为
width:auto，它可以自动识别其含义为“下一层父宽度的100%”。虽然高度不同，
height:auto表示未定义的数字。事实上，您的
.img容器本身的高度可以远远大于200px，尽管有一个200px高度的父容器，因为
高度：auto表示“任意大小”。@Steven简单地说，元素从其父元素继承百分比大小，默认情况下高度设置为随内容增长，但宽度不随内容增长，因此它们的行为有所不同。