CSS 圖片屬性指南：background-size 和 object-fit-css教學-PHP中文網

CSS 圖片屬性指南：background-size 和 object-fit

PHPz

發布： 2023-10-21 09:09:30

原創

1469 人瀏覽過

CSS 图片属性指南：background-size 和 object-fit

CSS 圖片屬性指南：background-size 和 object-fit

在前端開發中，使用圖片是非常常見的。為了讓圖片在網頁中顯示得更好，CSS 提供了多種屬性來調整和控制圖片的大小和佈局。其中，background-size 和 object-fit 是兩個常用的屬性，它們可以根據需要調整圖片的大小和適應方式。本文將詳細介紹這兩個屬性，並提供具體的程式碼範例。

一、background-size 屬性

background-size 屬性用來調整背景圖片的大小。它可以使用以下幾個值：

cover：將背景圖像等比縮放並完全覆蓋容器，可能會出現部分圖像被裁剪的情況。

.background {
    background-image: url('img.jpg');
    background-size: cover;
}

登入後複製

contain：將背景映像等比縮放並儘量完整地顯示在容器內。

.background {
    background-image: url('img.jpg');
    background-size: contain;
}

登入後複製

length：指定背景影像的寬度和高度。

.background {
    background-image: url('img.jpg');
    background-size: 200px 300px;
}

登入後複製

percentage：指定背景影像的寬度和高度相對於容器的百分比。

.background {
    background-image: url('img.jpg');
    background-size: 50% 75%;
}

登入後複製

二、object-fit 屬性

object-fit 屬性用於調整<img>標籤中的圖片的大小和適應方式。它可以使用以下幾個值：

fill：將圖片拉伸以充滿<img>元素，可能會導致圖片失真。

img {
    object-fit: fill;
}

登入後複製

contain：將圖片等比縮放並儘量完整地顯示在<img>元素中。

img {
    object-fit: contain;
}

登入後複製

cover：將圖片等比縮放並完全覆蓋<img>元素，可能會出現部分圖像被裁剪的情況。

img {
    object-fit: cover;
}

登入後複製

none：不改變圖片的大小和適應方式，預設值。

img {
    object-fit: none;
}

登入後複製

scale-down：根據圖片的原始尺寸和容器的大小決定圖片的大小和適應方式。

img {
    object-fit: scale-down;
}

登入後複製

三、範例程式碼

為了更好地理解並應用background-size 和object-fit 屬性，以下是具體的程式碼範例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .background {
            width: 500px;
            height: 300px;
            background-image: url('image.jpg');
            background-size: cover;
        }
        
        img {
            width: 200px;
            height: 150px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="background"></div>
    
    <img src="image.jpg" alt="图片">
</body>
</html>

登入後複製

以上程式碼中，.background 類別使用background-size: cover; 屬性將背景圖像等比縮放並完全覆蓋容器。而<img> 標籤套用 object-fit: cover; 屬性將圖片等比縮放並完全覆寫<img>元素。

透過調整相關屬性的值，你可以對圖片的大小和適應方式進行自訂，使其完美地融入你的網頁佈局。

總結：

透過使用background-size 和object-fit 屬性，我們可以很方便地調整和控制圖片的大小和適應方式。無論是作為背景圖像還是作為<img>元素中的圖片，我們都能輕鬆實現自訂的圖像展示效果。希望這篇文章能幫助你更理解和應用這兩個屬性。

以上是CSS 圖片屬性指南：background-size 和 object-fit的詳細內容。更多資訊請關注PHP中文網其他相關文章！