NOTE

【CSS】可変要素内の画像の高さを縦横の固定比率を維持し横幅いっぱいに表示しトリミングさせる方法

2021/2/13

2021/3/11

61 view

  【CSS】可変要素内の画像の高さを縦横の固定比率を維持し横幅いっぱいに表示しトリミングさせる方法

今回は、ウィンドウ幅によって横幅サイズが可変する要素内の画像の高さを横幅に合わせた比率で、さらに幅いっぱいに合わせて表示しトリミングする方法を解説します。
説明文が長くややこしいと思うので、デモページを参考ください。
サイトがリキッドデザインなどの場合に使えると思います。

デモページ

CSSで以下の記述で実装可能です。
padding-topの%で横幅に対する高さの比率を変えれます。

HTML

<div class="eyecatch">
<div class="eyecatch-inner">
<img src="/images/logo.png">
</div>
</div>

CSS

.eyecatch {
    position: relative;
    width: 100%;
}
.eyecatch:before {
    content:"";
    display: block;
    padding-top: 75%;
}
.eyecatch-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.eyecatch-inner img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

以上です。
ご質問などあればお気軽にコメントください。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



関連記事

ページの先頭に戻る