CSS 如何確保不同尺寸圖片的圖片尺寸一致？

使用CSS 實現不同影像的統一影像大小

建立吸引人的影像庫通常需要尺寸一致的影像，無論其原始尺寸如何。當處理不同高度和寬度的圖像時，這可能會帶來挑戰。然而，CSS 提供了一個解決方案，使所有影像看起來統一。

解決方案：

要將所有影像的尺寸設定為 100px x 100px，請使用下列CSS程式碼：

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

實作：

1. Float 屬性： 這會水平對齊圖像並確保它們彼此相鄰，建立內聯排列。
2. 寬度和高度屬性： 明確將寬度和高度設定為固定值，在本例中，寬度和高度均為 100px。
3. object-fit 屬性： 確保整個影像在指定範圍內可見方面。它會相應地縮放和裁剪圖像，同時保持其縱橫比。

範例：

為了說明此概念，請考慮以下HTML 與CSS 程式碼：

<img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="CSS 如何確保不同尺寸圖片的圖片尺寸一致？" >
<img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="CSS 如何確保不同尺寸圖片的圖片尺寸一致？" >
<img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="CSS 如何確保不同尺寸圖片的圖片尺寸一致？" >

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

此程式碼會將影像渲染為方形縮圖，高度和寬度一致100 像素。影像將被調整大小並裁剪以適應這些尺寸，同時保持其原始比例。

以上是CSS 如何確保不同尺寸圖片的圖片尺寸一致？的詳細內容。更多資訊請關注PHP中文網其他相關文章！