Publishing/CSS3

이미지 해상도 분기대응

oodada 2020. 10. 5. 12:19

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

이미지를 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}
}

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

dd  (0) 2020.10.20
웹폰트 만들기  (0) 2020.10.08
Image Guide  (0) 2020.08.05
유용한 css js 라이브러리  (0) 2020.03.31
SASS 기본  (0) 2020.03.30
티스토리 친구하기