CSS 画像プロパティのガイド:background-size と object-fit-CSSチュートリアル-php.cn

CSS 画像プロパティのガイド:background-size と object-fit

PHPz

リリース： 2023-10-21 09:09:30

オリジナル

1726 人が閲覧しました

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

CSS 画像プロパティガイド:background-size と object-fit

フロントエンド開発では、画像を使用することが非常に一般的です。 Web ページ上で画像をより適切に表示するために、CSS は画像のサイズとレイアウトを調整および制御するためのさまざまなプロパティを提供します。このうち、background-size と object-fit はよく使用される 2 つのプロパティで、必要に応じて画像のサイズと適応を調整できます。この記事では、これら 2 つのプロパティについて詳しく説明し、具体的なコード例を示します。

1.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%;
}

ログイン後にコピー

2. 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;
}

ログイン後にコピー

3. サンプルコード

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> 要素を完全にカバーします。

関連プロパティの値を調整することで、Web ページのレイアウトに完全にフィットするように画像のサイズと適応をカスタマイズできます。

概要:

background-size プロパティと object-fit プロパティを使用すると、オブジェクトのサイズとフィット感を簡単に調整および制御できます。画像方法。背景画像としても、<img> 要素内の画像としても、カスタマイズされた画像表示効果を簡単に実現できます。この記事が、これら 2 つのプロパティをより深く理解し、適用するのに役立つことを願っています。

以上がCSS 画像プロパティのガイド:background-size と object-fitの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。