CSSのみで縦横比を維持してトリミングされたサムネイルを作って横並びにしたい

6357 ワード
縦横比 トリミング サムネイル CSS 横並び CSS テキストリンク

やりたいこと

  • CSSのみで縦横比を維持したい
  • サイズも縦横比もバラバラな画像をCSSのみでトリミングしたい
  • 横並びにしたい
  • IE11も対応したい

やってみたこと

サイズ・縦横比の違う画像を用意しました。

HTML

<div class="flexBox">
    <!-- 1枚目 800*533 -->
    <div class="item">
        <div class="trimming">
            <img src="demo_01.jpg">
        </div>
    </div>

    <!-- 2枚目 1000*1500 -->
    <div class="item">
        <div class="trimming">
            <img src="demo_02.jpg">
        </div>    
    </div>

    <!-- 3枚目 900*900 -->
    <div class="item">
        <div class="trimming">
            <img src="demo_03.jpg">
        </div>
    </div>
</div>

CSS


body {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/*====== 横並びにしたい ======*/
.flexBox {
    display: flex;
    justify-content: space-between;
}
.item {
    width: calc(100% / 3 - 20px);
}

/*====== 縦横比を維持してトリミングしたい ======*/
.trimming {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 75%;
}
.trimming img {
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    width: 115%;
    height: auto;
    margin: auto;
}

できました。

ポイント

.trimming の padding-top: 75%; : 高さを指定しています。

.trimming img の width: 115%; : 1枚目の横幅が一番小さい画像が枠いっぱいになるようにしています。

.trimming img : 画像の縦横中央が表示されるように指定しています。

その他

横並びはflexで対応。
itemというクラス名のdivをかませないとうまくトリミングできませんでした。

aspect-ratioというプロパティを使用すると、上記より簡単に縦横比を維持できるようですがIE11で使えなかったので採用しませんでした。

この記事は以下の情報を参考にさせていただきました。