[ RESPONSIVE ] 19 블로그 영역 (고해상도 이미지)

[ RESPONSIVE ] 19 블로그 영역 (고해상도 이미지)

 

 

See the Pen [ RESPONSIVE ] 19 블로그 영역 (고해상도 이미지) by larmong (@larmong) on CodePen.

 

 

 

 

GitHub에서 보기 Click!

 

 

---

 

 

* 해상도에 따라 이미지 보여주기

<figure>
  <img src="./assets/img/blog1_@1.jpg" class="img-normal" alt="normal image">
  <img src="./assets/img/blog1_@2.jpg" class="img-retina" alt="retina image" width="100%">
  <figcaption>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</figcaption>
</figure>

 

ㄴ 첫번째 방법 (호환성 최고)

.blog1 img { width: 100%; }
.blog1 .img-retina { display: none; }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 1.5dppx) {
        .blog1 .img-retina {display: initial;}
        .blog1 .img-normal {display: none;}
}

 

ㄴ 두번째 방법 (호환성 좀 떨어짐, 최신 브라우저 가능, 3개 이상부터 편함)

<img src="./assets/img/blog3_@1.jpg" 
  srcset="
    ./assets/img/blog3_@1.jpg 1x, 
    ./assets/img/blog3_@2.jpg 2x, 
    ./assets/img/blog3_@3.jpg 3x
  " alt="image"
>

 

ㄴ 세번째 방법 (배경+미디어쿼리)

<div class="img-retina">
  <h5>image2</h5>
</div>

.blog2 .img-retina {
    background-image: url(../img/blog4_@1.jpg);
    background-size: cover;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 2dppx) {
        .blog2 .img-retina { background-image: url(../img/blog4_@2.jpg); }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
        only screen and (min-device-pixel-ratio: 3),
        only screen and (min-resolution: 3dppx) {
        .blog2 .img-retina { background-image: url(../img/blog4_@3.jpg); }
}

 

---

 

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!

* 고해상도 이미지 참고 click!