CSSの厳選小技③

今回は画像に関する特集

毎度同じみ小技紹介です。
今回のテーマは「画像」についてです。
画像のサイズを変更したりするの大変ですよね。
今日も便利な小技を紹介していきます。

画像のトリミング

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、元々の画像のサイズが全部一緒ではありませんよね。そんな時は object-fit: cover; でトリミングすることができます！画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。

img {
  width: 250px;
  height: 250px;
  object-fit: cover; /* この一行を追加するだけ！ */
}

画像をたくさん載せるようなサイトに重宝します！デザインをこだわるCSSらしい機能です！

テキストの回り込み

Webでのデザインはどうしても四角形になりがちですが、CSS Shapesを使えばテキストを画像などの形にあわせて回りこませることができます！円形にテキストを回り込ませるには、円形要素に shape-outside: circle(); を与えます。つまり、画像の周りにテキストを回り込ませてみるには以下のコードになります。

img {
  shape-outside: circle();
}

これ１行だけでいいんですよね。

結論

CSSでは見た目をお洒落にするためのものがかなり揃っています。
自分自身まだまだ知らないことが多いので今後もアウトプットで
ブログに執筆していきます！