How to use simple code to achieve the image adaptive display effect? (CSS code example)

In the construction of the site, the basic requirements of the site can be self-adaptive effect, then the implementation of image adaptation is a very important operation. The display of a picture can not be separated from the width and height of these two values. First of all, we need to understand the relevant knowledge points in CSS about the image width and height value properties. Here is a brief summary of the people.

1. The Width property sets the length of the element. This property defines the width of the element's content area.

Possible values are: auto auto width, length px, CM and other units defined width;% percent width; inherit specifies that the value of the width property should be inherited from the parent element.

2. Height property sets the altitude of the element. This property defines the height of the element's content area.

Possible values are: auto automatic height. length px, CM and other units define the height. % percent height. Inherit specifies that the value of the height property should be inherited from the parent element.

First, the CSS background Image Adaptive screen code is as follows (via Background-image: () introduce the picture):

. Img{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;} Background-image:url (picture path);

The above code can make the CSS image adaptive non-deformation, the principle here is to set the percentage.

Second, the CSS Image Adaptive screen code is as follows (through the IMG tag into the picture):

img {height:auto; width:auto\9; width:100%;}

The above code allows the IMG image to be adaptive to the div size, which is the screen size. Note Here is the use of Width:auto, that is, the width of the automatic meaning.
Then \9 is a hack CSS style, this in the normal CSS code after adding "\9" way, only IE browser can be recognized, other browsers will ignore this statement. In this way, the browser can be differentiated to achieve the purpose of compatible browsers.

This article about CSS how to make the picture adaptive introduction, I hope to have the need for friends to help.