CSS を使用して親コンテナ div を img 画像で埋め、コンテナのサイズを調整する方法

ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズで表示したい場合、画像サイズを直接設定すると画像が変形してしまいます。これが私たちが遭遇した問題です。解決策を見てみましょう。

<div>
        <img src="インポートした画像のアドレス" alt="">
</div>

方法1: img要素を垂直に中央に配置し、高さと幅を最小のフルスクリーン値に設定します。

div{
    位置:相対;
 幅: 100ピクセル;
    高さ: 100px;
    オーバーフロー:非表示;
}
 div画像{
    位置: 絶対;
    上位: 50%;
    左: 50%;
    表示: ブロック;
    最小幅: 100%;
    最小高さ: 100%;
    変換:translate(-50%,-50%);
}

方法 2: img の CSS スタイルを設定し、object-fit: cover を追加します。これは、CSS3 の背景画像の background-size: cover に似ています。

div{
  幅: 100ピクセル;
  高さ: 100px;
}
div画像{
    幅: 100%;
    高さ: 100%;
    オブジェクトフィット:カバー;
}

これで、CSS を使用して親コンテナー div を img 画像で埋め、適応型コンテナー サイズを実現する方法についての記事は終了です。CSS を使用してコンテナー コンテンツを img 画像で埋める方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。