CSS で画像アダプティブ コンテナを実装するためのサンプル コード

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

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

.div1 {
    幅:500ピクセル;
    高さ:400px;
    border:1px 黒一色;
}
.div1 画像 {
    幅: 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%;
        表示: ブロック;
        マージン: 自動;
    }

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

  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>