在 CSS 中調整影象大小

1. 在 CSS 中使用 max-width 和 max-height 屬性調整影象大小
2. 在 CSS 中使用 object-fit 屬性調整影象大小
3. 在 CSS 中使用 auto 寬度值和 max-height 屬性調整影象大小

本文介紹了在 CSS 中調整影象大小以按比例適應 div 並保持其高度和寬度的方法。

在 CSS 中使用 max-width 和 max-height 屬性調整影象大小

每當我們在 HTML 中插入影象時，影象會佔據其大小的總畫素。如果影象在特定容器內，有時影象的大小可能大於容器的大小。影象將在螢幕上覆蓋更多空間；它將從其他元素中獲取區域。結果，網頁將不會遵循我們的設計，並且沒有吸引力。為了解決這個問題，我們可以使用 max-width 和 max-height CSS 屬性根據容器的大小自動調整影象大小。這些屬性設定元素的最大高度和寬度。如果元素中的內容的寬度和高度大於 max-width 和 max-height 屬性，它們的大小將根據這些屬性的值進行調整。但是，如果它們的尺寸很小，則不會產生任何影響。我們可以為一個元素設定 max-height 和 max-width 屬性，這樣，容器內的元素就會調整它們的大小。

例如，在 HTML 中建立一個類為 cat 的 div。在 div 內使用 <img> 標籤插入影象。在 CSS 中，選擇 img 標籤並將屬性 max-width 和 max-height 分配給 100%。然後，選擇 cat 類並指定 200px 和 200px 的 height 和 width。

在下面的示例中，我們從 LoremFlickr 插入了一個隨機影象，它具有 300px 的 width 和 height。但是，容器 cat 的高度和寬度為 200px。當我們使用 max-height 和 max-width 屬性時，較大的影象會縮小到容器的大小。因此，我們自動調整了影象的大小。

示例程式碼：

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

在 CSS 中使用 object-fit 屬性調整影象大小

我們可以使用 CSS 中的 object-fit 屬性來調整影象大小以適合其容器。容器的大小可能比影象大或小。該屬性讓我們可以根據容器的大小來適應影象或視訊。我們可以使用 object-fit 屬性指定影象的擬合方式。該屬性採用 fill、contain、cover、none 和 scale-down 等值。我們可以使用 contain 值，以便較大的影象可以縮小到容器的給定尺寸。

例如，使用 img 標籤插入 600px 高度和寬度的影象，如第一個示例所示。在 CSS 中，選擇標籤並將高度和寬度設定為 100%。在 object-fit 選項中使用 contain 值。然後，選擇 cat 類併為容器提供 300px 的高度和寬度。

在這裡，我們插入了尺寸大於容器尺寸的影象。影象是 600px，而容器只有 300px。使用 object-fit 屬性，我們可以將影象縮小到容器的尺寸。因此，我們可以自動調整影象大小。

示例程式碼：

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

在 CSS 中使用 auto 寬度值和 max-height 屬性調整影象大小

我們可以使用 auto 值作為寬度並設定 max-height 屬性來指定影象的寬度以適合容器。我們將影象的高度縮小到容器的高度。例如，在 HTML 中插入如上的影象，並在 CSS 中將容器的高度設定為 200px。接下來，選擇 img 標籤，將寬度設定為 auto，並將 max-height 屬性設定為 100%。

在下面的示例中，影象最初具有 400px 的高度和寬度。我們已將容器的高度設定為 200px。max-height 屬性設定為 100% 會將影象縮小到 200px。因此，我們根據容器的高度調整了影象的高度。

示例程式碼：

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}