CSS 이미지 속성 안내: background-size 및 object-fit-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 이미지 속성 안내: background-size 및 object-fit

PHPz

Oct 21, 2023 am 09:09 AM

background-size 숙소안내 object-fit

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

CSS 이미지 속성 가이드: 배경 크기 및 개체 맞춤

프런트 엔드 개발에서는 이미지를 사용하는 것이 매우 일반적입니다. 웹 페이지에서 이미지가 더 잘 표시되도록 하기 위해 CSS는 이미지의 크기와 레이아웃을 조정하고 제어할 수 있는 다양한 속성을 제공합니다. 그중 background-size 및 object-fit는 일반적으로 사용되는 두 가지 속성으로, 필요에 따라 이미지의 크기와 적응을 조정할 수 있습니다. 이 문서에서는 이러한 두 가지 속성을 자세히 설명하고 특정 코드 예제를 제공합니다. 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 属性用于调整<img>标签中的图片的大小和适应方式。它可以使用以下几个值：

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

img {
    object-fit: fill;
}

로그인 후 복사

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

img {
    object-fit: contain;
}

로그인 후 복사

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

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; 属性将背景图像等比缩放并完全覆盖容器。而<img> 标签应用 object-fit: cover; 属性将图片等比缩放并完全覆盖<img>元素。

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

总结：

通过使用 background-size 和 object-fit

1. 배경 크기 속성 🎜🎜배경 크기 속성은 배경 이미지의 크기를 조정하는 데 사용됩니다. 다음 값을 사용할 수 있습니다: 🎜

cover: 배경 이미지의 크기를 비례적으로 조정하고 이미지의 일부가 잘릴 수 있습니다.

rrreee

contain: 배경 이미지의 비율을 비례적으로 조정하고 컨테이너에 최대한 완벽하게 표시합니다.

rrreee

길이: 배경 이미지의 너비와 높이를 지정합니다.

rrreee

백분율: 배경 이미지의 너비와 높이를 컨테이너에 대한 백분율로 지정합니다.

rrreee🎜2. Object-fit 속성🎜🎜object-fit 속성은 <img> 태그에서 이미지의 크기와 적응을 조정하는 데 사용됩니다. 다음 값을 사용할 수 있습니다. 🎜

fill: 이미지를 늘려 <img> 요소를 채웁니다. 이로 인해 이미지 왜곡이 발생할 수 있습니다.

rrreee

contain: 이미지 크기를 비례적으로 조정하고 <img> 요소에 최대한 완벽하게 표시합니다.

rrreee

cover: 이미지 크기를 비례적으로 조정하고 이미지의 일부가 잘릴 수 있습니다.

rrreee

없음: 이미지의 크기와 적응을 변경하지 않습니다. 기본값입니다.

rrreee

축소: 이미지의 원래 크기와 컨테이너의 크기를 기준으로 이미지의 크기와 적응을 결정합니다.

rrreee🎜3. 샘플 코드🎜🎜 ground-size 및 object-fit 속성을 더 잘 이해하고 적용하기 위해 다음을 참조하세요. 특정 코드 예: 🎜rrreee🎜위 코드에서 .Background 클래스는 Background-size: Cover; 속성을 사용하여 배경 이미지의 크기를 비례적으로 조정하고 컨테이너를 완전히 덮습니다. . <img> 태그는 object-fit:cover; 속성을 적용하여 이미지 크기를 비례적으로 조정하고 <img> 요소를 완전히 덮습니다. 🎜🎜관련 속성의 값을 조정하여 웹 페이지 레이아웃에 완벽하게 맞도록 이미지의 크기와 적응을 사용자 정의할 수 있습니다. 🎜🎜요약: 🎜🎜 background-size 및 object-fit 속성을 사용하면 이미지의 크기와 적응을 쉽게 조정하고 제어할 수 있습니다. 배경 이미지로든 <img> 요소의 이미지로든 사용자 정의된 이미지 표시 효과를 쉽게 얻을 수 있습니다. 이 기사가 이 두 가지 속성을 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 CSS 이미지 속성 안내: background-size 및 object-fit의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.