Shulou(Shulou.com)05/31 Report--

This article mainly introduces "the responsive processing method of picture element in HTML5". In the daily operation, I believe that many people have doubts about the responsive processing method of picture element in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "picture element responsive processing method of pictures in HTML5". Next, please follow the editor to study!

Responsive design

The so-called responsive design means that the web page layout can be adjusted adaptively in terminal devices with different screen resolutions, different pixel density ratios and different widths. The original intention of the responsive design is to make the website on the original PC compatible with the mobile terminal. Most of the responsive web pages are realized through media query and loading different styles of CSS files. This flexible layout makes the layout of the website in different equipment terminals more reasonable.

Although responsive design has many advantages, it also has many defects. Because the PC side and the mobile terminal visit the same website, the PC side can ignore the traffic restrictions, but the mobile side can not ignore it.

To match the screen width and pixel density of different terminal models, we generally use the following methods to set the CSS style of the image:

Img {max-width:100%; height:auto;}

Set the maximum width of the picture to 100% to ensure that the image does not exceed the width of its parent element. If the width of the parent element changes, so does the width of the picture. Height:auto can ensure that when the width of the picture changes, the height of the picture will be scaled according to its own width-to-height ratio.

In this way, when we visit the picture in the responsive web page on the mobile device, we only zoom the resolution of the picture, and download the big picture on the PC side, which not only wastes traffic, but also wastes bandwidth, and slows down the opening speed of the web page, seriously affecting the user's experience.

New solution:

Is a new element of HTML5

If the element works with the current element, it will enhance the process of responsive image work, which allows multiple tags to be set inside it to specify different image file names and load according to different conditions.

Different images can be loaded according to different conditions, such as the current height of the window (viewport), width (width), direction (orientation), pixel density (dpr), etc.

Name a few chestnuts.

The following chestnut loads different pictures for different screen widths; loads minpic.png; when the page width is between 320px and 640px, and loads middle.png when the page width is greater than 640px

two。 The following chestnut adds the screen direction as a condition; loads the picture at the end of _ landscape.png when the screen direction is horizontal; and loads the picture at the end of _ portrait.png when the screen direction is vertical

3. The screen pixel density is added as a condition in the following chestnut; the picture of _ retina.png 2x is loaded when the pixel density is 2x, and the picture without retina suffix is loaded when the pixel density is 1x

4. Add the image file format as a condition in the following chestnut. Load the webp format when the webp format is supported, and load the png format when it is not supported

5. The width description is added in the following example; the page chooses to load the largest picture no larger than the current width according to the current size.

6. Add the sizes attribute in the following example; load the corresponding version of the picture when the window width is greater than or equal to 800px

Compatibility:

Currently, only Chrome, Firefox and Opera have good compatibility. The specific compatibility is shown in the figure:

Advantages:

Load image files of appropriate size so that the available bandwidth can be fully utilized

Load images with different clips and different aspect ratios to adapt to layout changes of different widths

Load higher pixel density and display higher resolution images

Steps:

Create label

Create a tag within these tags that you want to use to execute any feature.

Add a media attribute to contain the features you want, such as width (max-width,min-width), direction (orientation), etc.

Add a srcset attribute with the value of the corresponding image file name to load. If you want to provide different pixel densities, such as the Retina display, you can add additional filenames to the srcset attribute

Add a fallback

Label

The working principle of

Grammar

As can be seen from the sample code above, without introducing js and third-party libraries, and without media queries in CSS, the element can be implemented to declare responsive images only with HTML.

element

The tag itself has no attributes. The magical place is used as a container.

Elements, which are used to load multimedia such as video and audio, have been updated for image loading and some new properties have been added:

Srcset (mandatory)

Accept a single image file path (e.g. srcset= "img/minpic.png").

Or comma-separated image paths described in pixel density (such as srcset= "img/minpic.png,img/minpic_retina.png 2x"), 1x description is not used by default.

Media (optional)

Accept any validated media query, you can see it in the CSS @ media selector (such as: media= "(min-width: 320px)").

It has been used in the previous grammar example.

Sizes (optional)

Receive a single width description (such as sizes= "100vw") or a single media query width description (such as: sizes= "(min-width: 320px) 100vw").

Or the comma-separated media query description of the width (such as: sizes= "(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc (33vw-100px)") the last one is taken as the default.

Type (optional)

Accept supported MIME types (e.g. type= "image/webp" or type= "image/vnd.ms-photo")

The browser loads the exact image resources based on these prompts and properties. According to the order of the list of tags. The browser uses the first appropriate element and ignores the following tags.

Add the last

element

The element is used internally for display when the browser does not support it or when there is no source tag match. Internal use

Tags are required, and if you forget, there will be no picture displayed.

Use

To declare the default picture display. Set

The tag is placed at the end of the inside, and the browser finds

A declaration that was previously ignored by the tag. This image tag also requires you to write its alt attribute.

At this point, the study of "responsive processing of pictures with picture elements in HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.