본문 바로가기
Publishing/CSS3

이미지 해상도 분기대응

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

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

.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}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    .img_g {background-image:url(https://m1.daumcdn.net/svc/image/U03/common_icon/527B1A8D03540C0004);-webkit-background-size:192px 170px;background-size:192px 170px}
}
@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/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
reset.css  (0) 2020.08.12
Image Guide  (0) 2020.08.05
Naming Guide  (0) 2020.08.05

댓글0