Responsive Web Design -Pictures

Use the width attribute

If the width attribute is set to 100%, the picture will be implemented according to the upper and lower ranges Responsive function:

       
   
调整浏览器窗口查看图像是如何扩展的。
  

Note that in the above example, the image will be larger than its original image. We can use themax-widthattribute to solve this problem very well.

Use the max-width attribute

If the max-width attribute is set to 100%, the image will never be larger than its original size:

       
   
调整浏览器大小，在宽度小于 460px 时查看图片比例变化。
  

Add pictures to the webpage

       
  
 
Chania
 
 
 
 
 
The Flight
 
The City
 
The Island
 
The Food
 
 
 
 
The City
 
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
  
 
 
 
What?
 
Chania is a city on the island of Crete.
 
Where?
 
Crete is a Greek island in the Mediterranean Sea.
 
How?
 
You can reach Chania airport from all over Europe.
 
 
 
 
 
调整浏览器窗口大小查看内容变化。
 
  

Background Image

Background image can be resized or scaled responsively.

The following are three different methods:

1. If the background-size property is set to "contain", the background image will adapt proportionally to the content area. The image keeps its proportions:

Here is the CSS code:

       
  
调整浏览器大小查看效果。
 
  

2. If the background-size attribute is set to "100% 100%", the background The image will stretch to cover the entire area:

       
  
调整浏览器大小查看效果。
 
  

3. If the background-size property is set to "cover", the background image will be expanded to be large enough so that the background image completely covers the background area. Note that this property maintains the proportions of the image so Some parts of the background image cannot be displayed in the background anchor area.

This is the CSS code:

       
  
调整浏览器大小查看效果。
 
  

Different devices display different pictures

Large size pictures can be displayed on large screens, but on small screens It really doesn't display well on the screen. There is no need for us to load large images on a small screen, as this will affect the loading speed. So we can use media queries to display different images based on different devices.

The following large and small pictures will be displayed on different devices:

       
  
调整浏览器宽度，背景图片在小于 400 px 时将改变。
  

You can use the min-device-width of the media query instead of the min-width attribute , it will detect the device width instead of the browser width. Image size does not change when the browser is resized.

HTML5 element

Theelement of HTML5 can set multiple pictures.

Browser support

Function