Pictures of responsive achieve

First, the background image responsive to realize

1, in order to fit Retina screen, the traditional CSS3 implementation is loaded by a width and height, respectively, enlarged to twice the picture, and then by Media Queries the background image size is reduced to double "background-size: 50% 50% ; " ,E.g:

.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, using the image-set

Obviously, through the Media Queries to achieve "responsive images" still very troublesome, maintainable CSS code is not high, there are some hack taste. We expect one of the native syntax to choose a different picture, it is fortunate that CSS Image Level 4 in on the realization of this native syntax of " 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 */

Second, the general picture is responsive to realize

CSS 'image-set "to solve the problem responsive background images, but HTML img element in how to do it?

1, @brucel draft resolved

November 2011 @brucel presented a draft of HTML5 solve:

<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, using the new srcset property

W3C community discussion group Responsive Images Community Group came into being. The latest norms here: http://picture.responsiveimages.org/ (the W3C http://www.w3.org/TR/html-picture-element/ ). As of this release time, it was most recently updated April 24, 2013, specification example:

<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>

Note: srcset also applies to video, audio tags, such as:

<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>

reference:

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3157952.html

Pictures of responsive achieve

Guess you like