webデザイン

【object-fit】縦横比維持、縦横センタリング、余白なしのトリミング、レスポンシブ、IE11まで対応の無敵サムネ作成

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回はありそうでなかったアスペクト比を維持したまま縦長、横長の画像もセンタリングで対応できる完璧なサムネイルの作り方をサンプル付きでご紹介します。

縦横比(アスペクト比)を設定し、画像をトリミングするcssを作成します。

padding-top:で縦横比を設定できます。
デモでは16:9になるように56.25%とします。
※16:9=100:x  x = 56.25

.wrap_card figure{
	position: relative;
	overflow: hidden;
	width: 100%;
}
.wrap_card figure::before{
	content: "";
	padding-top: 56.25%; /* 縦横比調節値 */
	display: block;
}
.wrap_card figure img{
	position: absolute;
	top: 0;
	left: 0;
}

これで画像が16:9でトリミングできましたのでつぎは画像自体を調整します。

縦横のセンタリングを設定します。

.wrap_card figure img{
	position: absolute;
	top: 0;
	left: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

サムネイルに余白があってもOKな場合はこちらで完成です。

画像の縦と横長いほうを表示させて余白を見せないようにします。
object-fitを使用します。

.wrap_card figure img {
    position: absolute;
    top: 0;
    left: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

object-fitはIE11では対応していないためjsのプラグインを使用します。

今回はofi.jsを使用します。以下よりダウンロードし設定します。
GitHub

以下のように読み込みます。

<script src="js/ofi.js.js"></script>

</body>前に記述します。

<script>objectFitImages();</script>

cssはfont-family: ‘object-fit: cover;’;で設定します。

.wrap_card figure img{
	position: absolute;
	top: 0;
	left: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover;'; /* ofi.js */
}

デモ

アスペクト比の維持の仕方、画像の縦横のセンタリングの仕方、object-fitを併用し、レスポンシブ、IE対応することが多かったのでまとめてみました。

uhaha

恐ろしいことにIEのサポート期間は2029年1月なのです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*