WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

サイト制作における画像の設定

img要素で見せる場合

ページの情報の1部として見せる
・フルードで表示させる場合
(max-width:100%ので原寸より大きくは見せられない、アスペクト比は一定)

・object-fitで表示させる場合(IEは未対応)
幅・高さを自由に指定して表示させる事が可能(background-sizeと似たように表示出来る)

・srcsetを使ってデバイスごとに複数の画像をimg要素で表示させる

背景画像で見せる場合

あくまでもサイトの雰囲気作りに必要な画像
・background-sizeで見せる
・heigthの代わりにpaddingを使う事で背景画像をアスペクト比を保ったまま可変にする事も可能