Maison > Article > interface Web > Guide des propriétés des images CSS : taille d'arrière-plan et ajustement de l'objet
Guide des propriétés des images CSS : taille d'arrière-plan et ajustement de l'objet
- PHPzoriginal
- 2023-10-21 09:09:301470parcourir
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;
}- 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 属性用于调整a1f02c36ba31691bcfe87b2722de723b标签中的图片的大小和适应方式。它可以使用以下几个值：
- fill：将图片拉伸以充满a1f02c36ba31691bcfe87b2722de723b元素，可能会导致图片失真。
img {
object-fit: fill;
}- contain：将图片等比缩放并尽量完整地显示在a1f02c36ba31691bcfe87b2722de723b元素中。
img {
object-fit: contain;
}- cover：将图片等比缩放并完全覆盖a1f02c36ba31691bcfe87b2722de723b元素，可能会出现部分图像被裁剪的情况。
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; 属性将背景图像等比缩放并完全覆盖容器。而a1f02c36ba31691bcfe87b2722de723b 标签应用 object-fit: cover; 属性将图片等比缩放并完全覆盖a1f02c36ba31691bcfe87b2722de723b元素。
通过调整相关属性的值，你可以对图片的大小和适应方式进行自定义，使其完美地融入你的网页布局。
总结：
通过使用 background-size 和 object-fit
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.
- contain : redimensionnez l'image d'arrière-plan proportionnellement et affichez-la aussi complètement que possible dans le conteneur.
- length : Spécifiez la largeur et la hauteur de l'image d'arrière-plan.
- pourcentage : spécifiez la largeur et la hauteur de l'image d'arrière-plan sous forme de pourcentage par rapport au conteneur.
object-fit est utilisé pour ajuster la taille et l'adaptation de l'image dans la balise a1f02c36ba31691bcfe87b2722de723b Il peut utiliser les valeurs suivantes : 🎜- fill : étirer l'image pour remplir l'élément a1f02c36ba31691bcfe87b2722de723b, ce qui peut provoquer une distorsion de l'image.
- contain : redimensionnez l'image proportionnellement et affichez-la aussi complètement que possible dans l'élément a1f02c36ba31691bcfe87b2722de723b.
- cover : redimensionnez l'image proportionnellement et couvrez complètement l'élément a1f02c36ba31691bcfe87b2722de723b.
- aucun : Ne modifie pas la taille et l'adaptation de l'image, valeur par défaut.
- 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.
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 a1f02c36ba31691bcfe87b2722de723b applique l'attribut object-fit: cover; pour redimensionner l'image proportionnellement et couvrir complètement l'élément a1f02c36ba31691bcfe87b2722de723b. 🎜🎜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 a1f02c36ba31691bcfe87b2722de723b, 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!