WEB開発デザイン 2019/06/21

CSSだけで縦横比固定のトリミングされたサムネイルをつくる【内接・外接リサイズ】※2021年 aspect-ratioプロパティ追記　

今回は、CSSでサムネイル画像を描画する方法を、自分用のメモも兼ねていくつか紹介します。

段階を追って、divなどのブロック要素で縦横比率を守ったボックスを作る方法と
imgタグを使用した場合、ieに対応した場合、background-imgを使用した場合に、それぞれ内接リサイズ・外接リサイズで表示する方法をまとめました。

内接リサイズ:画像全体が枠内に収まるようにリサイズする。画像の長辺に合わせた方法。
外接リサイズ:枠からはみ出す部分はカットする。画像の短辺を枠に合わせた方法。

①divの縦横比を固定してレスポンシブにする方法

サムネイルではレスポンシブ対応するために、CSSだけでアスペクト比を固定したい、という場合が多いと思います。
CSSのみで任意の縦横比のボックスを作成し、divやiframeのアスペクト比を固定することでレスポンシブなデザインの場合でも正方形を保つ方法があります。

1:1の正方形を作る場合は以下のようなスタイルになります。ここで重要なのは高さをpadding-bottom: 100%;で指定することです。

.box{
 	background-color:#ccc;
 	width: 100%;
 	height:0;
 	padding-bottom: 100%;
 }

この時padding-bottomの値は高さの比率 ÷ 幅の比率 × 100です
そのため1:1なら1/1*100で100%、4:3は、3/4*100で、75になります。

.box-75{
 	background-color:#ccc;
 	width: 100%;
 	height:0;
 	padding-bottom: 75%;
 }

※2021年追記　aspect-ratioプロパティ

aspect-ratioプロパティを使用すると、もっと簡単にアスペクト比固定のBOXを作成できます。2021年にすべてのブラウザにサポートされたので、使用がしやすくなりました。

.box-75{
 	background-color:#ccc;
 	width: 100%;
 	aspect-ratio: 4 / 3;
 }

padding-topの代わりに、aspect-ratioを使用する方が、比率の設定もわかりやすくコンテンツの余白設定とコンフリクトすることのなくなります。ぜひ使用していきたいですね。

②-1 imgタグを使用したサムネイル(object-fit)

CSS3には、object-fitというプロパティがあり、これを使用すればシンプルな記述で対応が可能です。
しかし、IE11が非対応のため、実装できるサイトに制限があります。

object-fitのブラウザ対応状況

https://caniuse.com/#feat=object-fit

a.内接リサイズ

任意のボックスサイズを指定した上で、object-fit: contain;を使用します。

.object-fit-con-a{
  background-color: #ccc;
  object-fit: contain;
  width: 200px;
  height: 200px;
}

b.外接リサイズ

任意のボックスサイズを指定した上で、object-fit: cover;を使用します。

.object-fit-cov-a{
  background-color: #ccc;
  object-fit: cover;
  width: 200px;
  height: 200px;
}

①の方法と組み合わせることで、レスポンシブのサムネイルも実装可能です。

.img_box{
    background-color: #ccc;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    position:relative;
}
//内接リサイズ
.object-fit-con-b{
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
}
//外接リサイズ
.object-fit-cov-b{
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

②-2 imgタグを使用したサムネイル(ie対応版)

object-fitはIE11が非対応のため、別の方法で実装するやり方もあります。
まず画像を囲むボックスを作り、任意のボックスサイズを指定した上でposition: relative;を指定します。

.img_box-ie-200{
    background-color: #ccc;
    overflow: hidden;
    width: 200px;
    height: 200px;
    position: relative;
}

レスポンシブの場合は①の方法と組み合わせることで比率を守ることが可能となります。

.img_box-ie{
    overflow: hidden;
    background-color: #ccc;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    position:relative;
}

a.内接リサイズ

position: absolute;を指定し、位置とmax-width、max-heightを指定します。

.object-fit-con-ie {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

b.外接リサイズ

position: absolute;を指定し、位置とwidth、heightを指定します。
外接リサイズの場合、内蔵する画像が縦長か、横長かによって記述を変える必要があるため注意が必要です。
横長の場合はwidth: auto;height: 100%;で縦長の場合はwidth: 100%;height: auto;となります。

//横長の場合
.object-fit-cov-ie-w{
    position: absolute;
    width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
//縦長の場合
.object-fit-cov-ie-h{
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

ieでobject-fitを対応させるスクリプトも存在しますので、もしどうしてもobject-fitで運用したいのであれば、使用を検討してみてもいいかと思います。

③background-imgを使用したサムネイル

CSS3で追加された background-size プロパティを使う方法です。

background-sizeのブラウザ対応状況

https://caniuse.com/#feat=background-img-opts

a.内接リサイズ

任意のボックスサイズを指定した上で、background-size: contain;を使用します

.background-image-con{
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    background-size: contain;
}

b.外接リサイズ

任意のボックスサイズを指定した上で、background-size: cover;を使用します

.background-image-cov{
    background-color: #ccc;
    background-position: center center;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    background-size: cover;
}

①と組み合わせる場合は以下のようになります。

//内接リサイズ
.background-image-con-res{
  background-color: #ccc;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height:0;
  padding-top: 100%;
  background-size: contain;
}
//外接リサイズ
.background-image-cov-res{
  background-color: #ccc;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height:0;
  padding-top: 100%;
  background-size: cover;
}

注意点としては、サーバサイドの画像リサイズではないので、画像の容量は元画像と同じになってしまう点。
高解像度の写真やサイズが大きすぎると、サイトの表示速度が遅くなることがありますので
任意のサイズに加工したり、圧縮して軽くしたりできる場合は最適化した方が良いかと思います。

しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！