이미지 해상도 분기대응

해상도에 맞춰 이미지를 분기대응해야 한다.

이미지를 1배, 2배, 3배로 이미지 제작 후 아래와 같이 코딩합니다.

/* 1배 이미지 분기대응 */
.img_g {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/527B1A970370F60001) no-repeat 0 0;text-indent:-9999px}

/* 2배 이미지 분기대응 */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/527B1A8D03540C0004);-webkit-background-size:192px 170px;background-size:192px 170px}
}

/* 3배 이미지 분기대응 */
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
    .img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/527B1A640358520001);-webkit-background-size:192px 170px;background-size:192px 170px}
}