Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to use HTML5 picture elements", the content is detailed, the steps are clear, the details are handled properly, I hope this "how to use HTML5 picture elements" article can help you solve your doubts, following the editor's ideas slowly in-depth, let's learn new knowledge.

Sometimes, zooming in or out the image proportionally to fit different devices (or screen sizes) does not work properly. Similarly, reducing the size of the image using the widthandheight attribute or attribute does not reduce the size of the original file. To solve these problems, HTML5 introduces tags that allow you to define multiple versions of an image for different types of devices.

This element contains zero or more elements, each referring to a different image source, and a

At the end of the component. Each element also has an attribute that media specifies a media condition (similar to a media query) that the browser uses to determine when a particular source should be used. Let's try an example:

Try this code for example »

Note: the browser will evaluate each child element and select the most matching element in it; if no match is found, use the

The URL of the element src attribute. In addition,

The label must be specified as the last child of the element.

Read here, this "how to use HTML5 picture elements" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.