Responsive to choose the right picture to load, not so strapped for traffic today, or front-end staff should get rid of the habit is simply better to show pictures
Scenario:
1. The same picture, different sizes;
2. different picture, in response to selection.
Three ways:
1. media inquiries;
2. img attribute + sizes srcset; // this has a small ills, for a loaded image, dynamically adjust the size of the viewport, but the operation was successfully loaded the display size of that picture of (not change with the resources that can not change the picture)
3. picture + source。
===================================== begin!
① media all very familiar, not much to say. .
There are places to mention: if only css (not less or sass), need to change the resources (different pictures),
Then use the background-image will save you a lot of trouble, take advantage of media restrictions -> Replace the url address.
So often set:
② srcset with sizes:
how to write?
. 1 < IMG 2 srcset = " . 3 ./img/1-320.png 320W, . 4 ./img/1-480.png 480W, . 5 ./img/1-800.png 800W . 6 " . 7 sizes = "(max -width: 320px) 280px, (max-width: 480px) 440px, (max-width: 768px) 700px, 1000px " . 8 the src =" ./ IMG / Elva-Fairy-800.png " . 9 Alt =" same 3 pictures of different sizes " 10 />
320w, 480w, 800w can be used as a picture of the original width size
Corresponding size range: 0-320px, 320-480px, 480-768px, 768px above;
Img corresponding to the width: 280px, 440px, 700px, 1000px
Corresponding to the selected picture is: 1-320.png, 1-480.png, 1-800.png, 1-800.png
However, when the following conditions are changed, select Load picture has changed
1 sizes="(max-width: 320px) 350px,(max-width: 480px) 440px,(max-width: 768px) 800px, 1000px"
Corresponding size range: 0-320px, 320-480px, 480-768px, 768px above;
Img corresponding to the width: 350px , 440px, 800px, 1000px
Corresponding to the selected picture is: 1-480.png , 1-480.png, 1-800.png, 1-800.png
The segment summary:
1. img choose from srcset focus pictures, preference is larger than the display size of the picture to show the geometric compression; // actual picture of 300kb, 100kb load may only need a
As above, 350> 320, then the load will choose img tag 480, the geometric compression 350px wide display
2. The bigger picture is not suitable, it will be loaded to their maximum geometric amplification of conduct, to show; // Tip: 800px-> 1000px can also accept, 500px-> 1000px, do not be too oh paste
As above, after setting the width 1000px 768px, loaded geometric images were enlarged to 1-800.png 1000px wide display
3. You can use 'vw' such units, instead of the above 'px', to make your picture resized according smoothly viewport
Like this:
sizes="(max-width: 320px) 100vw,(max-width: 480px) 50vw, 800px"
③ picture + source
Note: Although the label has wrapped two pictures of the picture source, but the only choice when loading a load
1 <picture>
2 <source srcset="./imgs/banner-640X750.jpg" media="(max-width: 992px)" />
3 <source
4 srcset="./imgs/banner-1920X960.jpg"
5 media="(min-width: 992px)"
6 />
7 <img src="./imgs/banner-1920X960.jpg" alt="banner-pic" width="100%" />
8 </picture>
picture label inclusiveness good, you can put <a> or <map> + <area>, to add pictures to your hoplinks
Below, I put them together, with the words, like with one, either with <a>, either with <map> + <area>
1 <picture id="banner_pics"> 2 <a href="http://wwww.baidu.com" class="more-info">了解更多</a> 3 <source srcset="./imgs/banner-640X750.jpg" media="(max-width: 992px)" /> 4 <source srcset="./imgs/banner-1920X960.jpg" media="(min-width: 992px)" /> 5 <img src="./imgs/banner-1920X960.jpg" alt="" usemap="#myMap" /> 6 <map name="myMap" id="myMap"> 7 <area 8 shape="rect" 9 coords="43.75%, 74.69%, 56.35%, 83.64%" 10 href="http://www.baidu.com" 11 target="_blank" 12 alt="baidu" 13 /> 14 </map> 15 </picture>
Nothing good summary, used to get to try it,
After all, with a vue, react rarely operated dom, and again a small micro-channel program, mpvue her. . .
You may occasionally show it, write them in the template inside, ha ha ha ^ _ ^