如何使用 Flexbox 按比例以圖像填充 Div？

按比例用圖像填充Div

在創建響應式網頁設計時，一個常見的挑戰是用以下內容填充div 元素圖像，同時保持其縱橫比。當影像在縱向和橫向之間的方向發生變化時，在尊重其原始比例的同時無縫調整其大小變得很困難。

為了解決這個問題，CSS 提供了一個使用 flexbox 的解決方案。透過利用 CSS Flexbox，您只需幾行程式碼即可實現所需的結果。

Flexbox 來救援

Flexbox 是一個 CSS 佈局模組，提供靈活和分配和管理容器元素內的空間的有效方法。在這種情況下，它可用於確保影像始終填充容器 div，無論其寬高比如何。

實作

考慮以下 HTML 標籤：

<div class="container">
    <img src="/static/imghwm/default1.png" data-src="some-image.jpg" class="lazy" alt="Could be portrait or landscape">
</div>

要實現所需的行為，請將下列 CSS樣式應用於elements:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.container img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

說明

• .container:

  • display: flex: 在容器div。
  • justify-content: center; align-items: center;：使映像檔在 div 內居中。
  • overflow:hidden：隱藏映像溢出容器的任何部分。

• .container img:

  • flex-shrink: 0;：防止影像縮小當容器調整大小時。
  • min-width: 100%; min-height: 100%;：確保影像始終擴展到至少容器的大小。

結果

實現這些 CSS 樣式後，圖片會自動填滿容器 div，同時保持其縱橫比。如果影像是縱向的，則其寬度將為 100%，並且其高度將按比例調整。同樣，如果影像是橫向的，其高度將為 100%，寬度也會相應調整。

以上是如何使用 Flexbox 按比例以圖像填充 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！