HTML表示でサイズが決まらないサムネイル画像はクリップ機能を使えば良い。

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ブログ紹介などのリストページで、サムネイル画像を表示する場合など、基本的に画像の縦横比率やサイズを固定にすれば、何の問題もないのだが、フリー写真などを利用する場合、画像を処理していくのはなかなかしんどい。
 

以前に、画像をトリミングして、中央表示するやり方を書いたが、もっと簡単なやり方があったので、紹介します。
 

[css] サムネイル画像の中央表示(トリミング)

DOM構造

以前の構造
 

 

今回の構造
 

 

画像のネストが1階層少なくなっています。
 

以前のバージョンは、画像の中央をトリミングするためにつけていた階層なのですが、今回は画像をそのままクリップする方法で配置します。

ソース

画像素材
 

a.jpg

 

b.jpg

 

index.html

 

表示結果

解説

画像に設定してある「object-fit: cover;」が今回のポイントです。
 

CSSの”object-fit”の使い所は、width,height共に100%とセットした画像は、上位要素の縦横比と同じで無い場合、ピクセル比率が変わって、伸びた画像になってしまいます。
それを比率を保って、クリップまでしてくれるのが”object-fit”なんですね。
 

画像の端までキチンと表示されなければ行けない場合は、使えませんが、そういう場合は、サイズをキッチリ管理するはずなので、問題ないでしょう。
 


 

Can I useで見てみると、ほぼ全てのブラウザで対応しているのがわかるので、使わないと損ですよね。
 

前回行なった処理がかなり簡素にできることがわかったので、今回の記事は修正記事と考えてください。
 

サムネイルはなくても、ページのアイキャッチやロゴ、バナーなどでも便利に使えると思いますよ。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です