본문 바로가기
Publishing/CSS3

이미지 해상도 분기대응

by 오다다 코드 odada 2020. 10. 5.

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

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

/* 1배 이미지 분기대응 */
.img_g {display:inline-block;overflow:hidden;background:url(https://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(https://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(https://m1.daumcdn.net/svc/image/U03/common_icon/527B1A640358520001);-webkit-background-size:192px 170px;background-size:192px 170px}
}

'Publishing > CSS3' 카테고리의 다른 글

dd  (0) 2020.10.20
웹폰트 만들기  (0) 2020.10.08
이미지 해상도 분기대응  (0) 2020.10.05
Image Guide  (0) 2020.08.05
Naming Guide  (0) 2020.08.05
input password에 텍스트가 보이지 않을 경우  (0) 2020.04.19

댓글0