Panduan untuk sifat imej CSS: saiz latar belakang dan muat objek-tutorial css-php.cn

Panduan untuk sifat imej CSS: saiz latar belakang dan muat objek

PHPz

Lepaskan： 2023-10-21 09:09:30

asal

1662 orang telah melayarinya

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

Panduan sifat imej CSS: saiz latar belakang dan sesuai objek

Dalam pembangunan bahagian hadapan, menggunakan imej adalah perkara biasa. Untuk menjadikan imej dipaparkan lebih baik pada halaman web, CSS menyediakan pelbagai sifat untuk melaraskan dan mengawal saiz dan susun atur imej. Antaranya, background-size dan object-fit ialah dua atribut yang biasa digunakan, yang boleh melaraskan saiz dan penyesuaian imej mengikut keperluan. Artikel ini menerangkan kedua-dua sifat ini secara terperinci dan menyediakan contoh kod khusus. background-size 和 object-fit 是两个常用的属性，它们可以根据需要调整图片的大小和适应方式。本文将详细介绍这两个属性，并提供具体的代码示例。

一、background-size 属性

background-size 属性用于调整背景图片的大小。它可以使用以下几个值：

cover：将背景图像等比缩放并完全覆盖容器，可能会出现部分图像被裁剪的情况。

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

Salin selepas log masuk

contain：将背景图像等比缩放并尽量完整地显示在容器内。

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

Salin selepas log masuk

length：指定背景图像的宽度和高度。

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

Salin selepas log masuk

percentage：指定背景图像的宽度和高度相对于容器的百分比。

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

Salin selepas log masuk

二、object-fit 属性

object-fit 属性用于调整<img>标签中的图片的大小和适应方式。它可以使用以下几个值：

fill：将图片拉伸以充满<img>元素，可能会导致图片失真。

img {
    object-fit: fill;
}

Salin selepas log masuk

contain：将图片等比缩放并尽量完整地显示在<img>元素中。

img {
    object-fit: contain;
}

Salin selepas log masuk

cover：将图片等比缩放并完全覆盖<img>元素，可能会出现部分图像被裁剪的情况。

img {
    object-fit: cover;
}

Salin selepas log masuk

none：不改变图片的大小和适应方式，默认值。

img {
    object-fit: none;
}

Salin selepas log masuk

scale-down：根据图片的原始尺寸和容器的大小决定图片的大小和适应方式。

img {
    object-fit: scale-down;
}

Salin selepas log masuk

三、示例代码

为了更好地理解和应用 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>

Salin selepas log masuk

以上代码中，.background 类使用 background-size: cover; 属性将背景图像等比缩放并完全覆盖容器。而<img> 标签应用 object-fit: cover; 属性将图片等比缩放并完全覆盖<img>元素。

通过调整相关属性的值，你可以对图片的大小和适应方式进行自定义，使其完美地融入你的网页布局。

总结：

通过使用 background-size 和 object-fit

1. atribut saiz latar belakang #🎜🎜##🎜🎜# atribut saiz latar belakang digunakan untuk melaraskan saiz imej latar belakang. Ia boleh menggunakan nilai berikut: #🎜🎜#

cover: Skala imej latar belakang secara berkadar dan tutup sepenuhnya sebahagian daripada imej itu.

rrreee

mengandungi: Skalakan imej latar belakang secara berkadaran dan paparkannya selengkap mungkin dalam bekas.

rrreee

panjang: Tentukan lebar dan ketinggian imej latar belakang.

rrreee

peratusan: Tentukan lebar dan ketinggian imej latar belakang sebagai peratusan berbanding bekas.

rrreee#🎜🎜#2. atribut object-fit#🎜🎜##🎜🎜#object-fit atribut digunakan untuk melaraskan imej dalam <img> tag Saiz dan sesuai. Ia boleh menggunakan nilai berikut: #🎜🎜#

isi: Regangkan imej untuk mengisi elemen <img>

rrreee

mengandungi: Skalakan imej secara berkadaran dan paparkannya selengkap mungkin dalam elemen <img>

rrreee

cover: Skalakan imej secara berkadar dan tutup sepenuhnya elemen <img>

rrreee

tiada: Jangan ubah saiz dan penyesuaian imej, nilai lalai.

rrreee

kecilkan skala: Tentukan saiz dan penyesuaian imej berdasarkan saiz asal imej dan saiz bekas.

rrreee#🎜🎜#3 Contoh kod#🎜🎜##🎜🎜#Untuk lebih memahami dan menggunakan saiz latar belakang dan sesuai objek<. atribut>, berikut ialah contoh kod khusus: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kelas .background menggunakan

background-size: cover; attribute Mengskalakan imej latar belakang secara berkadar untuk menutup bekas sepenuhnya. Teg <img> menggunakan atribut object-fit: cover; untuk menskalakan imej secara berkadar dan menutup sepenuhnya elemen <img> #🎜🎜##🎜🎜#Dengan melaraskan nilai sifat berkaitan, anda boleh menyesuaikan saiz dan penyesuaian imej supaya ia sesuai dengan reka letak halaman web anda dengan sempurna. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜##🎜🎜#Dengan menggunakan atribut saiz latar belakang dan object-fit, kami boleh melaraskan dan mengawal dengan mudah bagaimana imej itu bersaiz dan disesuaikan. Sama ada sebagai imej latar belakang atau sebagai imej dalam elemen <img> kami boleh mencapai kesan paparan imej tersuai dengan mudah. Semoga artikel ini akan membantu anda lebih memahami dan menggunakan kedua-dua sifat ini. #🎜🎜#

Atas ialah kandungan terperinci Panduan untuk sifat imej CSS: saiz latar belakang dan muat objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!