写真を正方形にトリミングする方法。画像処理しないでCSSのみでトリミング。

写真・画像をサムネイル表示する場合など、正方形にトリミングしたい場合がある。画像処理ソフトでトリミングする方法もあるが、Webブラウザで表示するのが目的なら、写真・画像はそのままでCSSでトリミングすることができる。imgタグに「object-fit: cover; 」を指定すればよい。

まず、imgに何も指定しない場合。縦長の写真。

次は、imgにwidthとheightのみ指定した場合。画像が上下に圧縮されている。

img {
	width: 180px;
	height: 180px;
}

次は、imgにwidthとheight以外に「object-fit: cover;」を指定した場合。きれいにトリミングされている。

img {
	width: 180px;
	height: 180px;
	object-fit: cover;
}

以下の「デジカメ・スナップ写真 ブログ記事一覧」の写真は、この方法で正方形にして表示している。