ブログ紹介などのリストページで、サムネイル画像を表示する場合など、基本的に画像の縦横比率やサイズを固定にすれば、何の問題もないのだが、フリー写真などを利用する場合、画像を処理していくのはなかなかしんどい。
以前に、画像をトリミングして、中央表示するやり方を書いたが、もっと簡単なやり方があったので、紹介します。
[css] サムネイル画像の中央表示（トリミング）
DOM構造
以前の構造
今回の構造
画像のネストが１階層少なくなっています。
以前のバージョンは、画像の中央をトリミングするためにつけていた階層なのですが、今回は画像をそのままクリップする方法で配置します。
ソース
画像素材
a.jpg
b.jpg
index.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin:0;
padding:0;
border:0;
list-style-type: none;
display:flex;
}
ul > li {
margin:4px;
padding:0;
border:4px solid black;
background-color:white;
border-radius:4px;
}
ul > li > a{
margin:0;
padding:0;
border:0;
display:block;
width:128px;
height:128px;
}
ul > li > a > img {
margin:0;
width:100%;
height:100%;
object-fit: cover;
}
ul > li > .title {
height:20px;
line-height:20px;
font-size:14px;
text-align:center;
}
</style>
</head>
<body>
<h1>CSS - Thumbnail</h1>
<ul>
<li>
<a>
<img src="a.jpg">
</a>
<div class="title">a.jpg</div>
</li>
<li>
<a>
<img src="b.jpg">
</a>
<div class="title">b.jpg</div>
</li>
</ul>
</body>
</html>
表示結果
解説
画像に設定してある「object-fit: cover;」が今回のポイントです。
CSSの"object-fit"の使い所は、width,height共に100%とセットした画像は、上位要素の縦横比と同じで無い場合、ピクセル比率が変わって、伸びた画像になってしまいます。
それを比率を保って、クリップまでしてくれるのが"object-fit"なんですね。
画像の端までキチンと表示されなければ行けない場合は、使えませんが、そういう場合は、サイズをキッチリ管理するはずなので、問題ないでしょう。
https://caniuse.com/#search=object-fit
Can I useで見てみると、ほぼ全てのブラウザで対応しているのがわかるので、使わないと損ですよね。
前回行なった処理がかなり簡素にできることがわかったので、今回の記事は修正記事と考えてください。
サムネイルはなくても、ページのアイキャッチやロゴ、バナーなどでも便利に使えると思いますよ。
