简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

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
1699 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 属性用于调整背景图片的大小。它可以使用以下几个值：

  1. cover：将背景图像等比缩放并完全覆盖容器，可能会出现部分图像被裁剪的情况。
.background {
    background-image: url('img.jpg');
    background-size: cover;
}
Copier après la connexion
  1. contain：将背景图像等比缩放并尽量完整地显示在容器内。
.background {
    background-image: url('img.jpg');
    background-size: contain;
}
Copier après la connexion
  1. length：指定背景图像的宽度和高度。
.background {
    background-image: url('img.jpg');
    background-size: 200px 300px;
}
Copier après la connexion
  1. percentage：指定背景图像的宽度和高度相对于容器的百分比。
.background {
    background-image: url('img.jpg');
    background-size: 50% 75%;
}
Copier après la connexion

二、object-fit 属性

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

  1. fill：将图片拉伸以充满<img>元素，可能会导致图片失真。
img {
    object-fit: fill;
}
Copier après la connexion
  1. contain：将图片等比缩放并尽量完整地显示在<img>元素中。
img {
    object-fit: contain;
}
Copier après la connexion
  1. cover：将图片等比缩放并完全覆盖<img>元素，可能会出现部分图像被裁剪的情况。
img {
    object-fit: cover;
}
Copier après la connexion
  1. none：不改变图片的大小和适应方式，默认值。
img {
    object-fit: none;
}
Copier après la connexion
  1. 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 : 🎜
  1. 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
  1. contain : redimensionnez l'image d'arrière-plan proportionnellement et affichez-la aussi complètement que possible dans le conteneur.
rrreee
  1. length : Spécifiez la largeur et la hauteur de l'image d'arrière-plan.
rrreee
  1. 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 : 🎜
  1. fill : étirer l'image pour remplir l'élément <img>, ce qui peut provoquer une distorsion de l'image.
rrreee
  1. contain : redimensionnez l'image proportionnellement et affichez-la aussi complètement que possible dans l'élément <img>.
rrreee
  1. cover : redimensionnez l'image proportionnellement et couvrez complètement l'élément <img>.
rrreee
  1. aucun : Ne modifie pas la taille et l'adaptation de l'image, valeur par défaut.
rrreee
  1. 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!

Étiquettes associées：
background-size Guide de la propriété object-fit
source：php.cn
Article précédent：Guide d'animation CSS : vous apprenez étape par étape comment créer des effets de streamer Article suivant：Comment utiliser CSS pour créer un effet d'affichage de texte défilant transparent.
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Utiliser des grilles pour créer cette conception spécifique : un guide étape par étape J'essaie de créer une mise en page similaire à cette image, j'ai essayé d'utiliser cette g...
Depuis 2024-04-06 20:29:08
0
2
492
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！