サムネイルカード

背景画像サムネイル

背景画像で作るサムネイルのポイントは、padding-topハックとbackground-sizeプロパティを組み合わせる点。background-size:coverを指定しておくと指定領域のサイズがどのように変化しても自動的に背景画像で覆ってくれるため、サムネイルエリアの画像のコントロールが楽であることがメリット。
一方、使用する画像をCSSで指定するので、頻繁に更新が必要となる場合はメンテナンス性が悪いというデメリットが生じる。特にCMS組み込みなどで動的な出力が必要な場合は、background-imageプロパティだけをHTML側にstyle属性で指定するなど、更新性の悪さをカバーする配慮が必要となる。

.card::before {
　content: "";
　display: block;
　padding-top: 56.25%;
　border-radius: 5px 5px 0 0;
　background-position: center center;
　background-size: cover;
　transition: .3s;
}
/*サムネイル画像指定*/
.card._card01::before {
　background-image: url(img/001.jpg);
}
.card._card02::before {
　background-image: url(img/002.jpg);
}
.card._card03::before {
　background-image: url(img/003.jpg);
}
.card._card04::before {
　background-image: url(img/004.jpg);
}

img画像サムネイル

商品写真など、画像自体が情報としての意味を持つサムネイル画像の場合は、マークアップの観点から背景画像ではなくimg画像を配置する。この場合、実画像をそのままのアスペクト比で表示するなら何も問題もないが、クライアント自身が更新作業を行うCMS案件ではサイズや比率がバラバラの画像が多いので、あらかじめ対応できるように実装しておく必要がある。このような場合はobject-fitを使うことで比較的簡単に解決できる。

object-fitはimg要素にpxなどの固定値でサイズを指定すればそのサイズの中に収まるように画像をトリミングしてくれるが、それ単体でアスペクト比を保ちつつ更に画像をレスポンシブ化することは基本的にできない。固定サイズでトリミングするのではなく、レスポンシブ対応でのトリミングを行いたい場合は、padding-topハックやaspect-ratioなど、親要素側でアスペクト比を固定するテクニックと組み合わせて使用することになる。

.card__thumb {
　position: relative;
　transition: .3s;
}
.card__thumb::before {  /* 親要素にpadding-topハックで画像表示領域を確保 */
　content: "";
　display: block;
　padding-top: 56.25%;
}
.card__thumb img{
　position: absolute;  /* 絶対配置でpadding領域に画像を被せる */
　left: 0;
　top: 0;
　max-width: none;
　width: 100%;
　height: 100%;
　object-fit: cover;  /* padding領域全体にimg要素が広がる状態にした上で、object-fitでトリミング */
　border-radius: 5px 5px 0 0;
}
inserted by FC2 system