Html 更改高度时保持图像纵横比

使用CSS flex box模型，如何强制图像保持其纵横比

JS小提琴：

请注意，图像拉伸或收缩以填充容器的宽度。这很好，但是我们可以让它拉伸或收缩高度来保持图像比例吗

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

大多数图像具有固有尺寸，即自然尺寸，如

jpeg

图像。如果指定的大小定义了宽度和高度中的一个，则使用固有比率确定缺少的值…-看

但是，据我所知，如果将图像设置为当前的direct flex项目，那么这不会像预期的那样起作用

请参阅以下讨论和可能相关的错误报告：

• -未正确实施Chrome/Flexbox内部尺寸调整
• -柔性容器应使用“柔性基础”而不是“宽度”来计算柔性项目的固有宽度
• -在Flexbox中，允许固有纵横比通知主要尺寸计算

---

作为一种解决方法，您可以将每个

---

我最近一直在玩flexbox，我通过实验和以下推理找到了解决方案。然而，事实上，我不确定这是否真的发生了

如果实际宽度受flex系统的影响。所以，当元素的宽度达到父元素的最大宽度后，css中设置的额外宽度将被忽略。然后将宽度设置为100%是安全的

由于img标记的高度是从图像本身导出的，所以将高度设置为0%可能会有所帮助。（这是我不清楚的地方……但对我来说，它应该修复它是有意义的）

（还记得第一次在这里看到它吗！）

---

仅适用于chrome，但不适用于img标签。如果定义一面，则另一面的大小将调整为保持纵横比，默认情况下，图像将扩展为其原始大小

使用这个事实，如果您将每个img标记包装成div标记，并将其宽度设置为父div的100%，那么高度将根据您想要的纵横比

---

为了防止图像在flex父对象中的任一轴上拉伸，我找到了两种解决方案

您可以尝试在图像上使用对象拟合，例如

object-fit: contain;

或者，您可以添加flex specfic规则，在某些情况下可能会更好地工作

align-self: center;
flex: 0 0 auto;

---

事实上，我发现图像标签的容器需要有一个高度才能保持图像的比例。 例如>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

然后在html中，容器将包装标签图像

<div class="container"><img src="image.jpg" alt="image" /></div>

---

这项针对IE和其他浏览器的工作

我也遇到了同样的问题。使用“柔体对齐”将图元居中。您需要使用

align items:center

而不是

align content:center

。这将保持纵横比，而对齐内容将不保持纵横比。

这是预期的行为。默认情况下，flex容器将拉伸其所有子容器。图像也不例外。（即，父项将具有

对齐项：拉伸
属性）

为了保持纵横比，我们有两种解决方案：

将默认的
align items:stretch
属性替换为
align items:flex start
或
align self:center
等，

或

将align属性专门设置为子对象本身：例如，
align-self:center
或
align-self:flex-start
等。

无需添加包含div的文件

css“align items”属性的默认值是“stretch”，这是导致图像拉伸到其原始高度的原因。将css“align items”属性设置为“flex start”可以解决您的问题

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

声明
display:flex的位置已给定元素。

对齐项目：居中
在支持
min-width:auto
的新浏览器上，第一个代码段需要
.slider>div{min-width:0}
。flexbox规范引入了一个新的
auto
值作为
min-width
和
min-height
的默认值（以前是
0
）。Chrome还没有实现它，所以您的第一个代码段可以工作。但是新浏览器需要它，以便允许flex项收缩到小于图像默认宽度的范围内。+1这应该是可以接受的答案，因为它讨论的是flexbox模型中的图像，这是本例中的根本问题……如果您的布局在不同的断点处没有改变，那么表格就很好了，但这不太可能。如果图像的比例不尽相同呢？很有趣，但它似乎是一个bug。根据“百分比是根据生成的框的包含块的高度计算的。如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为
自动
”。这就是Firefox上发生的事情。解释ff和铬的区别。因为宽度在ff中的作用似乎和高度在chrome中的作用一样。这很有趣，但我担心X浏览器的解决方案并不是真正的解决方案。你评论的小提琴，在这里：是绝对迷人的，虽然，在FF。这似乎表明，如果真的是100%，FF会使图像高度与图像高度“成比例”。换句话说，img并不“知道”容器的display:flex。这就解释了为什么在FF中，如果将img的宽度设置为100%，图像会比将宽度设置为自动时高。这有点接近。。。但仅适用于Chrome：我知道有两个答案建议使用div，但我将这个答案标记为正确，因为它解释了为什么图像高度与我预期的不同。事实上，这是正常和正确的行为，不太可能被“修复”，因为它不是一个bug。但这个答案并没有涉及flexbox，因为图像在flexbox中的行为确实不同
.container{display:flex; height:100%;} img{width:100%;height:auto;}

<div class="container"><img src="image.jpg" alt="image" /></div>

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}