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

在 Flexbox 中保持图像长宽比

在 Flexbox 布局中，图像往往会不成比例地拉伸或收缩以填充容器的宽度。要在调整图像高度的同时保持宽高比，请考虑以下解决方案：

选项 1：object-fit

将 object-fit 属性添加到图像：

img {
  object-fit: contain;
}

这可确保图像在适合范围内时保留其尺寸

选项 2：Flexbox 规则

在图像上使用以下 Flexbox 属性：

img {
  align-self: center;
  flex: 0 0 auto;
}

• 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;
}

.slider img {
  margin: 0 5px;
}

/* Option 1: object-fit */
.img-contain {
  object-fit: contain;
}

/* Option 2: Flexbox Rules */
.img-flex {
  align-self: center;
  flex: 0 0 auto;
}

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