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

Maison

interface Web

tutoriel CSS

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

PHPz

Oct 21, 2023 am 09:09 AM

background-size Guide de la propriété object-fit

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!

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

4 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

1 Il y a quelques mois By DDD

R.E.P.O. Meilleurs paramètres graphiques

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

1 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7386

Tutoriel Java

1630

Tutoriel CakePHP

1357

Tutoriel Laravel

1267

Tutoriel PHP

1216

Afficher plus

Related knowledge

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques Mar 08, 2025 am 09:45 AM

Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans

Créez un formulaire de contact JavaScript avec le cadre Smart Forms Mar 07, 2025 am 11:33 AM

Ce tutoriel montre la création de formulaires JavaScript professionnels à l'aide du cadre Smart Forms (Remarque: non plus disponible). Bien que le cadre lui-même ne soit pas disponible, les principes et techniques restent pertinents pour d'autres constructeurs de formulaires.

Ajout d'ombres de boîte aux blocs et éléments WordPress Mar 09, 2025 pm 12:53 PM

Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.

Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

Faire votre première transition Svelte personnalisée Mar 15, 2025 am 11:08 AM

L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.

Barbars CSS personnalisés chics et cool: une vitrine Mar 10, 2025 am 11:37 AM

Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair

Show, ne dit pas Mar 16, 2025 am 11:49 AM

Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à

Que diable sont les commandes NPM? Mar 15, 2025 am 11:36 AM

Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.

See all articles