アトリエロワ

画像の縦横比を固定してレスポンシブHTML+CSS

画像の縦横比を固定してレスポンシブ可変が可能なCSSコード

HTML

<span>
<img src="" alt="">
</span>

CSS

span {
      padding-bottom: 66.67%; // 横3 縦2 の比率(2÷3*100%)
      position: relative;
      display: block;
}

img {
        position: absolute;
        top: 50%; //画像縦中央寄せ
        left: 50%; //画像横中央寄せ
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        max-height: initial;
        object-fit: cover;
}

HOME > html+css > 画像の縦横比を固定してレスポンシブHTML+CSS