LoginSignup
0
0

More than 1 year has passed since last update.

【CSS】object-fitで画像の大きさを揃える

Posted at

はじめに

 imgタグを使って画像を表示させたのはいいものの、大きさが合ってなくてガタガタになる・・・なんてことはないでしょうか。
CSSを使って大きさを揃えることができますので備忘録として残していきます。

object-fit

 object-fitを使うことで画像を指定したサイズにフィットさせることができます。
object-fitは、コンテナに対して、画像や動画をどのように表示するかを設定します。

style.css
 image{
     object-fit: contain;
 }

このように指定することで、縦横比を維持しつつコンテナからはみ出さないようフィットさせることができます。

色々な値

object-fitプロパティには、contain以外にも様々な値を設定することができます。

・fill:縦横比を無視して画像をコンテナにフィットさせます。
・cover:コンテナに余白が出ないよう、全体を覆う形で表示されます。はみ出す部分はトリミングされます。
・none:画像のリサイズはせずに縦横中央に配置します。
・scale-down:コンテナより画像が大きい場合はcontain、小さい場合はnoneを指定します。

終わりに

便利なプロパティなのでぜひ使ってみましょう!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0