그림 응답 식 구현

1. 배경 그림 응답 식 실현
1. Retina 에 맞 게 화면, 전통 적 인 CSS 3 실현 방식 은 너비 와 높이 를 각각 두 배로 확대 한 그림 을 불 러 온 다음 에 통과 하 는 것 이다.  Media Queries  배경 그림 의 사 이 즈 를 배로 줄 입 니 다. 예 를 들 어:

.mod .hd h3 {background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/*      */}

/* ------------- Retina ------------- */

@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */

       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16    */

       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */

       only screen and (min-resolution: 240dpi), /*    */

       only screen and (min-resolution: 2dppx) /*    */{

　　.mod .hd h3{

   　　 background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);

   　　 background-size: 105px 155px;

　　}

}

2 、 image - set 사용
뻔 하 다  Media Queries  '응답 식 그림' 을 실현 하 는 것 은 매우 번 거 롭 습 니 다. CSS 코드 의 유지 가능성 이 높 지 않 고 hack 냄새 가 납 니 다.우 리 는 원생 의 문법 으로 서로 다른 그림 을 선택 하 기 를 더욱 기대한다. 다행히도  CSS Image Level 4  에서 이런 원생 문법 인 'image-set' 을 실현 했다.

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/*      */

background-image: -webkit-image-set(

    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,

    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

2. 일반 그림 의 응답 식 실현
CSS "image - set" 는 배경 그림 의 응답 식 문 제 를 해결 하 였 으 나 HTML 의 img 요 소 는 어떻게 합 니까?
1、  @brucel 의 해결 초안
2011 년 11 월  @brucel  HTML 5 의 해결 초안 을 제시 했다.

<picture>

    <source src="landscape.webp" type="image/webp" media="screen and (min-width: 20em) and (orientation: landscape)" />

    <source src="landscape.jpg" type="image/jpg" media="screen and (min-width: 20em) and (orientation: landscape)" />

    <source src="portrait.webp" type="image/webp" media="screen and (max-width: 20em) and (orientation: portrait)" />

    <source src="portrait.jpg" type="image/jpg" media="screen and (max-width: 20em) and (orientation: portrait)" />

　　<!--             -->

　　<img src="fallback.jpg" alt="fancy pants"> 
</picture>

2, 새로운 srcset 속성 사용
W3C 지역 사회 토론 팀  Responsive Images Community Group  운 에 따라 생기다.최신 규범 은 여기 있 습 니 다. http://picture.responsiveimages.org/  (W3C  http://www.w3.org/TR/html-picture-element/ ）。본문 발표 시간 까지 최근 업 데 이 트 는? 2013 년 4 월 24 일, 규범 예시:

<picture width="500" height="500">

　　<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">

　　<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

　　<source srcset="small-1.jpg 1x, small-2.jpg 2x">

　　<img src="small-1.jpg" alt="">

　　<p>Accessible text</p>

</picture>

설명: srcset 은 video, audio 태그 에 도 적 용 됩 니 다. 예 를 들 어:

<video>

    <source src="video.mp4" type="video/mp4" />

    <source src="video.webm" type="video/webm" />

    <source src="video.ogv" type="video/ogg" />

    <img src="fallback.jpg" alt="fancy pants" />

    <!-- fallback.jpg is *always* downloaded -->

</video>

참고:

How To Avoid Duplicate Downloads In Responsive Images

CSS 와 HTML 5 응답 식 그림