TOP > ウェブデザイン > コーディング > 画像の高さを可変する要素に合わせて縦横比を維持し幅いっぱいにトリミング表示させるCSS記述方法

画像の高さを可変する要素に合わせて縦横比を維持し幅いっぱいにトリミング表示させるCSS記述方法

2021/2/13

2021/10/5

4989 views

可変要素　画像表示

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

デモページ

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;
}

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