アトリエロワ

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

Array

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

html+css

html+css

+ More