如何在 CSS Flexbox 中保留图像长宽比？

在 Flexbox 中保持图像长宽比

在 CSS Flexbox 模型中，调整图像高度时保持图像比例可能是一个挑战。但是，有多种方法可以实现此目的。

对象适合属性

一种方法是在图像上使用对象适合属性。通过设置 object-fit: contains，图像将缩放以适合其目标容器，同时保留其宽高比。

Flex 特定规则

另一个选项是使用特定于 Flex 的规则：

• 设置align-self: center 以将图像在其父级中垂直居中
• 设置 flex: 0 0 auto 使图像的宽度和高度灵活，允许其根据需要缩小或扩展。

示例

这是一个演示两者的示例方法：

<div class="slider">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
</div>

.slider {
    display: flex;
    height: 200px;
}

.slider img {
    margin: 0 5px;
    object-fit: contain;
}

/* Alternative Flex-Specific Rules */
.slider img {
    align-self: center;
    flex: 0 0 auto;
}

此方法应该有效地保留图像的纵横比，即使在调整图像高度时也是如此。

以上是如何在 CSS Flexbox 中保留图像长宽比？的详细内容。更多信息请关注PHP中文网其他相关文章！