imgタグとbackground-imageの使い分け
- その画像に意味がある場合はimgタグ
- 本文､内容とは直接関係ない装飾､デザイン等（画面に表示されなくても大して困らない画像）にはbackground-imageを使います
imgタグは表示させる画像のパス（URI）や代替テキスト（alt属性）の設定など、コードにボリュームがあるのでなくても困らないimgタグは削ってしまった方がコードがスッキリし、ファイルサイズが減るので望ましいです。
imgタグの特徴
imgタグにwidthとheightを付与するとアスペクト比で画像が歪んだ形になりやすい
アスペクト比とは、画面や画像の縦と横の長さ（画素数）の比のことです。
object-fit:cover; //歪み解消
vertical-align: bottom; //上下余白を解消するbackground-imageの特徴
アスペクト比で画像が歪まない その代わり高さが変わらない
background-imageは親要素に高さを付与しないと画像が表示されない
デフォルトの画像より大きいサイズだとbackground-imageにはbackground-repeatがデフォルトでついてるので繰り返し表示される繰り返したくない場合はno-repeat
divの要素に合わせて画像をいっぱいいっぱいまで表示したい場合はbackground-sizeのcoverをbackground-position:center; 画像を真ん中中心にトリムしてくれる
background-size:contain; 画像をトリムしないが上下左右で余白が出やすい
background-imageでアスペクト比を保つ方法
&::before {
display:block;
content:’’;
puffing-top:50%;
}
関連記事
