cssのbackground-imageの設定におけるcontainとcoverの違い

デザイン

Written by:

2021年9月12日

background-sizeを指定する時の設定にはそれぞれ以下のような違いがある

contain：縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

cover：縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

単純に写真をその範囲にいっぱいに表示したいだけならcontainを使わないと、背景の大きさによっては画像が切れてしまう事があるんですね

Last modified: 2021年9月10日

About the Author /

コメントを残す

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