クリエイター：コーディング備忘録ブログ

コーディング

CSS:画像トリミング

画像の一覧を表示するときなどに、画像サイズが統一されていないが為に、
コーディングに苦労した経験はおありではないでしょうか。

今回は、そんなときに便利なCSSプロパティをご紹介します。

その名も「object-fit」

こやつ、画像の縦横比を維持しつつ、トリミングしてくれるすげえ奴です。

たとえば、こんな画像があったとします。

縦長と横長の画像を正方形でトリミングするには、

こうなります。すごい！便利！

で、サポートブラウザですが、いつも通り「Can I Use」を見てみると…

例によってIE系は全滅です。残念でしかない…。

IEの対応策や、詳細については下記のページで解説されています。

参考：http://www.webcreatorbox.com/tech/object-fit/

この記事を見た人は次の記事も見ています。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP