Guide des propriétés des images CSS : taille d'arrière-plan et ajustement de l'objet-tutoriel CSS-php.cn

Guide des propriétés des images CSS : taille d'arrière-plan et ajustement de l'objet

PHPz

Libérer： 2023-10-21 09:09:30

original

1714 Les gens l'ont consulté

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

Guide des propriétés des images CSS : taille de l'arrière-plan et ajustement des objets

Dans le développement front-end, l'utilisation d'images est très courante. Afin d'améliorer l'affichage des images sur les pages Web, CSS fournit une variété de propriétés pour ajuster et contrôler la taille et la disposition des images. Parmi eux, background-size et object-fit sont deux attributs couramment utilisés, qui permettent d'ajuster la taille et l'adaptation de l'image selon les besoins. Cet article explique ces deux propriétés en détail et fournit des exemples de code spécifiques. background-size 和 object-fit 是两个常用的属性，它们可以根据需要调整图片的大小和适应方式。本文将详细介绍这两个属性，并提供具体的代码示例。

一、background-size 属性

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

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

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

二、object-fit 属性

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

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

img {
    object-fit: fill;
}

Copier après la connexion

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

img {
    object-fit: contain;
}

Copier après la connexion

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

img {
    object-fit: cover;
}

Copier après la connexion

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

img {
    object-fit: none;
}

Copier après la connexion

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

img {
    object-fit: scale-down;
}

Copier après la connexion

三、示例代码

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

Copier après la connexion

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

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

总结：

通过使用 background-size 和 object-fit

1. Attribut Background-size 🎜🎜L'attribut background-size est utilisé pour ajuster la taille de l'image d'arrière-plan. Il peut utiliser les valeurs suivantes : 🎜

cover : redimensionner l'image d'arrière-plan proportionnellement et couvrir complètement le conteneur. Une partie de l'image peut être recadrée.

rrreee

contain : redimensionnez l'image d'arrière-plan proportionnellement et affichez-la aussi complètement que possible dans le conteneur.

rrreee

length : Spécifiez la largeur et la hauteur de l'image d'arrière-plan.

rrreee

pourcentage : spécifiez la largeur et la hauteur de l'image d'arrière-plan sous forme de pourcentage par rapport au conteneur.

rrreee🎜2. L'attribut Object-fit🎜🎜object-fit est utilisé pour ajuster la taille et l'adaptation de l'image dans la balise <img> Il peut utiliser les valeurs suivantes : 🎜

fill : étirer l'image pour remplir l'élément <img>, ce qui peut provoquer une distorsion de l'image.

rrreee

contain : redimensionnez l'image proportionnellement et affichez-la aussi complètement que possible dans l'élément <img>.

rrreee

cover : redimensionnez l'image proportionnellement et couvrez complètement l'élément <img>.

rrreee

aucun : Ne modifie pas la taille et l'adaptation de l'image, valeur par défaut.

rrreee

scale-down : Déterminez la taille et l'adaptation de l'image en fonction de la taille d'origine de l'image et de la taille du conteneur.

rrreee🎜3. Exemple de code🎜🎜Afin de mieux comprendre et appliquer les propriétés background-size et object-fit, voici les éléments suivants. Exemple de code spécifique : 🎜rrreee🎜Dans le code ci-dessus, la classe .background utilise l'attribut background-size: cover; pour redimensionner l'image d'arrière-plan proportionnellement et couvrir complètement le conteneur . La balise <img> applique l'attribut object-fit: cover; pour redimensionner l'image proportionnellement et couvrir complètement l'élément <img>. 🎜🎜En ajustant les valeurs des propriétés associées, vous pouvez personnaliser la taille et l'adaptation de l'image afin qu'elle s'intègre parfaitement dans la mise en page de votre page Web. 🎜🎜Résumé : 🎜🎜En utilisant les attributs background-size et object-fit, nous pouvons facilement ajuster et contrôler la taille et l'adaptation de l'image. Que ce soit comme image d'arrière-plan ou comme image dans l'élément <img>, nous pouvons facilement réaliser des effets d'affichage d'image personnalisés. Espérons que cet article vous aidera à mieux comprendre et appliquer ces deux propriétés. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!