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

デザイン

Written by:

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

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

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

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

コメントを残す

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