Leitfaden zu CSS-Bildeigenschaften: Hintergrundgröße und Objektanpassung-CSS-Tutorial-php.cn

Leitfaden zu CSS-Bildeigenschaften: Hintergrundgröße und Objektanpassung

PHPz

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

Original

1726 Leute haben es durchsucht

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

Leitfaden zu CSS-Bildeigenschaften: Hintergrundgröße und Objektanpassung

In der Frontend-Entwicklung ist die Verwendung von Bildern sehr verbreitet. Um die Darstellung von Bildern auf Webseiten zu verbessern, bietet CSS verschiedene Eigenschaften zum Anpassen und Steuern der Größe und des Layouts von Bildern. Darunter sind background-size und object-fit zwei häufig verwendete Attribute, mit denen die Größe und Anpassung des Bildes nach Bedarf angepasst werden kann. In diesem Artikel werden diese beiden Eigenschaften ausführlich erläutert und spezifische Codebeispiele bereitgestellt. background-size 和 object-fit 是两个常用的属性，它们可以根据需要调整图片的大小和适应方式。本文将详细介绍这两个属性，并提供具体的代码示例。

一、background-size 属性

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

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

二、object-fit 属性

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

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

img {
    object-fit: fill;
}

Nach dem Login kopieren

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

img {
    object-fit: contain;
}

Nach dem Login kopieren

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

img {
    object-fit: cover;
}

Nach dem Login kopieren

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

img {
    object-fit: none;
}

Nach dem Login kopieren

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

img {
    object-fit: scale-down;
}

Nach dem Login kopieren

三、示例代码

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

Nach dem Login kopieren

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

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

总结：

通过使用 background-size 和 object-fit

1. Attribut „Hintergrundgröße“ 🎜🎜Das Attribut background-size wird verwendet, um die Größe des Hintergrundbilds anzupassen. Es können die folgenden Werte verwendet werden: 🎜

cover: Skaliert das Hintergrundbild proportional und deckt den Container möglicherweise vollständig ab.

rrreee

contain: Skaliert das Hintergrundbild proportional und zeigt es möglichst vollständig im Container an.

rrreee

length: Geben Sie die Breite und Höhe des Hintergrundbilds an.

rrreee

Prozentsatz: Geben Sie die Breite und Höhe des Hintergrundbilds als Prozentsatz relativ zum Container an.

rrreee🎜2. Das Attribut „Object-fit“🎜🎜object-fit wird verwendet, um die Größe und Anpassung des Bildes im <img>-Tag anzupassen. Es können die folgenden Werte verwendet werden: 🎜

fill: Dehnen Sie das Bild, um das <img>-Element zu füllen, was zu Bildverzerrungen führen kann.

rrreee

contain: Skalieren Sie das Bild proportional und zeigen Sie es möglichst vollständig im <img>-Element an.

rrreee

cover: Skaliert das Bild proportional und deckt das <img>-Element vollständig ab.

rrreee

none: Größe und Anpassung des Bildes nicht ändern, Standardwert.

rrreee

herunterskalieren: Bestimmen Sie die Größe und Anpassung des Bildes basierend auf der Originalgröße des Bildes und der Größe des Containers.

rrreee🎜3. Beispielcode🎜🎜Um die Eigenschaften background-size und object-fit besser zu verstehen und anzuwenden, sind die folgenden Spezifisches Codebeispiel: 🎜rrreee🎜Im obigen Code verwendet die Klasse .background das Attribut background-size: cover;, um das Hintergrundbild proportional zu skalieren und den Container vollständig abzudecken . Das <img>-Tag wendet das Attribut object-fit: cover; an, um das Bild proportional zu skalieren und das <img>-Element vollständig abzudecken. 🎜🎜Durch Anpassen der Werte verwandter Eigenschaften können Sie die Größe und Anpassung des Bildes anpassen, sodass es perfekt in Ihr Webseitenlayout passt. 🎜🎜Zusammenfassung: 🎜🎜Durch die Verwendung der Attribute background-size und object-fit können wir die Größe und Anpassung des Bildes einfach anpassen und steuern. Ob als Hintergrundbild oder als Bild im <img>-Element, wir können problemlos individuelle Bilddarstellungseffekte erzielen. Wir hoffen, dass Ihnen dieser Artikel dabei hilft, diese beiden Eigenschaften besser zu verstehen und anzuwenden. 🎜

Das obige ist der detaillierte Inhalt vonLeitfaden zu CSS-Bildeigenschaften: Hintergrundgröße und Objektanpassung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!