ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【HTML,CSS】画像のレスポンシブ、retina対応


①imgタグのレスポンシブ
横幅のみ%等指定。
②background-imageのレスポンシブ
heightはpaddingでとる。background:url(300.jpg) no-repeat center/cover;
③解像度によって画像を置換
高解像度の画面で見た場合、mediaqueryで条件分岐させ画像を解像度の高いものに置換する。

解像度が2倍かそうでないかで条件分岐

@media only screen and (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){

}