如何在 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="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>

.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中文網其他相關文章！