How to use the picture element of HTML5 to process responsive images-

The fixed width and perfect pixel website design are far from us. Wide-screen display, Internet TV, multi-dimensional tablet computers and smart phones require that the design be designed to handle everything possible and change the width from 320px to 7680px. Image response is a major challenge in web design. Let's take a look at how to use elements ...,. Images are one of the most challenging aspects in responsive web design. Today, let's take a look at how to use Elements to process response images.

Let's take a look at the problem first.

Our website design with fixed width and perfect pixels is far from us. In today's wide-screen display, Internet TV, multi-dimensional tablet computers and smartphones, our design must handle everything possible and change the width from 320px to 7680px.

As a result of this multi-resolution landscape, images need to be stretched or shrunk to meet these different requirements. This can be understood as the following problem. When a vector image encounters an exception, the width of the vast majority of images with specific pixels does not change.

So what should we do?

The most common solution

As a general rule, you will find the following CSS styles in any responsive Website:

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

This Code uses the max-width: 100% setting to ensure that the image will never exceed the width of its parent container. If the width of the parent container is smaller than the image width, the image is reduced accordingly. Height: the auto setting ensures that the image is retained with its own aspect ratio when this happens.

Working principle

The basic steps are as follows:

• Create Label.

• Create one in these tags that you want to use to execute any featureElement.

• Add a media attribute to include the desired features, such as the current viewport height, width, and orientation.

• Add a srcset attribute that matches the corresponding image file name for loading. If you want to provide different pixel density, such as the Retina display, you can add additional file names to your srcset attribute,

• Add a rollback element.

Here is a simple basic example to check whether the viewport is smaller than 768px. If it is smaller than, a smaller image will be loaded:

You may notice that the syntax used in media attributes is the same as that used in creating CSS media features. You can use the same features, which means you can query attributes such as max-width, min-width, max-height, min-height, and orientation.

You can also use these features to determine the direction of the device, so as to load the horizontal or vertical version of the image, you can also mix the size characteristics. For example:

The code above enables you to load a small version of landscape cropping image on a small landscape device. Load a large version of the same image on a large landscape device.

In this way, on small-sized devices, or on large-sized devices, the device can independently take the dominant image to load different image clipping versions.

If you want to provide image versions of different resolutions for a higher-density display, you can add additional file names in the srcset attribute. For example, let's take a look at the Retina code processing segment with a pixel density of 2x:

Current usage of Elements

Now, Chrome, Firefox, and operabrowsers have implemented Element support. In the near future, it will be widely supported in other browsers. However, this moment has not yet come.

At the same time, if you want to use The element may have to wait. You can also use a polyfill provided by the Picturefill2.0; Filament member.

You can download and add the picturefill. js file to the header of your project: