CSS で画像アダプティブコンテナを実装するいくつかの方法 (要約)

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。

1. imgタグ方式

幅と高さを 100% に設定することがすぐに考えられます。効果を見てみましょう。

<divクラス='div1'>
    <img src="./peiqi.png" alt="">
</div>

.div1 {
    幅:500ピクセル;
    高さ:400px;
    border:1px 黒一色;
}
.div1 画像 {
    /*
    幅: 100%;
    高さ:100%;
    */
}

これは通常のページです（画像がコンテナより大きい場合は、画像がコンテナを超えます）

.div1 {
    幅:500ピクセル;
    高さ:400px;
    border:1px 黒一色;
}
.div1 画像 {
    幅: 100%;
    高さ:100%;
}

これは100％ペギーです

適応の要件を満たしていますが、図のように画像が歪んでいます。画像がコンテナより小さい場合、強制的に適応させると画像が歪んでしまいます。単一画像（ロゴ、プレースホルダー画像など）であれば、デザイン案に沿って展開していただけます。しかし、インターフェースによって取得される画像が不規則になることがよくあります。一般的に、画像がコンテナよりも小さい場合、水平方向と垂直方向の中央に配置されます。
タスクを整理してみましょう:

画像の幅と高さがコンテナより小さい場合は、垂直方向と水平方向の中央に配置されます。画像の幅と高さがコンテナより大きい場合は、アスペクト比が維持され、幅または高さがコンテナで埋められます。

<divクラス='div1'>
        <img src="./peiqi.png" alt="">
    </div>
    <divクラス='div1'>
        <img src="./peiqi2.png" alt="">
    </div>
    <divクラス='div1'>
        <img src="./peiqi4.jpeg" alt="">
    </div>

.div1 {
        幅:500ピクセル;
        高さ:400px;
        border:1px 黒一色;
        表示: テーブルセル;
        垂直位置合わせ: 中央;
    }
    .div1 画像 {
        最大幅: 100%;
        最大高さ: 100%;
        表示: ブロック;
        マージン: 自動;
    }

max-height プロパティは、height プロパティが max-height より大きい値に設定されることを防ぎます。
max-height 属性は、特定の要素の最大の高さを設定するために使用されます。height 属性で設定された高さがこの属性で設定された高さより大きい場合、height 属性は無効になります。

2. 背景画像方式

.div {
        背景サイズ: 含む;
 }

background-size: contain; は、画像の幅と高さがコンテンツ領域に完全に収まるように、画像を最大サイズに拡大します。 CSS の background-size: contain; プロパティを使用すると、画像の幅と高さがコンテナーよりも小さい状況をさらに最適化できます。

上記のコード:

  div {
        高さ: 400px;
        幅: 500ピクセル;
        境界線: 1px 黒一色;
        背景繰り返し: 繰り返しなし;
        背景サイズ: 含む;
        背景の位置: 中央;
    }
    .div1 {
        背景画像: url(./peiqi1.png);
    }
    .div2 {
        背景画像: url(./peiqi2.png);
    }
    .div3 {
        背景画像: url(./peiqi4.jpeg);
    }

<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>

もちろん、最終的にはすべて需要と製品に必要なものによって決まります。

これで、CSS でイメージアダプティブコンテナを実装するいくつかの方法についての記事は終了です (要約)。CSS イメージアダプティブコンテナに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ピクセルを包括的なブランド体験に変えるヒント

>>: MySQL/MariaDB で完全な Unicode をサポートする方法