为什么我的图像高度缩放不正确？答案

【问题标题】：Why isn't my image height scaling correctly?为什么我的图像高度缩放不正确？
【发布时间】：2015-12-06 19:01:18
【问题描述】：

所以我正在制作一个画廊，其中图像显示在 200x200 像素的列表项中

#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/

【问题讨论】：

您的直接img 元素的父容器似乎没有定义height，因此不会阻止img 显示完整height，但width 有效，即使未设置，div 默认为 100%。

标签： javascript css image-resizing

【解决方案1】：

为 .img-container 添加高度：

.img-container{
    height: 100%;
}

CSS 高度非常严格。它基于元素的直接父级的高度。 img 的直接父级是.img-container - 它没有高度（意思是height: auto;）。解析器将其识别为未知数，因此您的 img 高度不会缩放。

【讨论】：

好吧，因为网页设计为主要垂直流动（您可以注意到您的鼠标只有垂直滚动）。大多数元素的高度被设计为尽可能“流动”，而宽度大多受到限制。您可以在 display: block; 元素中最清楚地看到该功能，默认为 100% 父级的宽度，同时允许灵活的高度。
唯一的区别是width: auto; 与height: auto; 的行为。当图像尝试与其父级宽度进行比较，发现其父级有width: auto;时，它可以自动识别其含义为“下一层父级宽度的100%”。虽然高度不同，但height: auto; 表示未定义的数字。事实上，尽管有一个 200px 高度的父级，你的 .img-container 的高度本身也可以比 200px 大得多，因为 HTML 中的 height: auto; 表示“随心所欲”。
@Steven 简单地说，元素从其父元素继承百分比大小，并且默认情况下高度设置为随其内容增长，但宽度不是，因此它们的行为有所不同。

【解决方案2】：

尝试在图像上使用object-fit:cover;height:100% 属性，并将以下样式添加到容器中

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

希望这能解决你的问题

https://jsfiddle.net/smyhbckx/7/

【讨论】：

嗯...向img-container 添加高度和宽度有效。但为什么它首先适用于宽度而不是高度？