How do I use CSS to adapt a picture to the screen?

This article mainly introduces how to realize the effect of CSS image adaptive screen. The simplest method for beginners is to write a picture in the background of a div. This will enable you to adapt to the screen size and not have a horizontal scroll bar.

The CSS Image Adaptive Screen code example is as follows:

Background:url (1.jpg) Center No-repeat;background:url (image address) 0 0 no-repeat Scroll transparent;background-size:100% 100% */* Picture fixed in IMS inside */<div class= "IMS" ></ Div>

Note: Insert the image in HTML, if you want the image to adapt to the screen's small instead of the width and height of the fixed can be added in the CSS code

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

\9 is a form of hack CSS, which is added "\9" after the normal CSS code, 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.