How do pictures in HTML adapt to the screen? This article has an adaptive usage introduction to pictures

This article mainly introduces about how the images in HTML are adapted to the screen, as well as the methods and examples of how the image adapts to the mobile end, and finally the adjustment method of the background image. Now let's take a look.

Let's start by looking at how the images in HTML are adapted to the screen:

The simplest way to make a picture adapt to the screen size is to make sure it works, and you write that picture in the background of the Div, which is background:url. /img/1.jpg) center no-repeat;

This will allow you to adapt to the screen size, and will not appear in the horizontal scroll bar

First is set Background:url (image address) 0 0 no-repeat scroll transparent;background-size:100% 100%;

<div class= "Msg_desc" ></div>

Here the picture is fixed in the msg_desc inside, convenient bar.

Note: Insert a picture inside the HTML, if you want the image to fit the screen small instead of the width and height fixed can be added in the CSS code:

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

Width:auto is the meaning of automatic width.

"\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.

There is also a way to make Web page picture width and height adaptive:

In our design of the Web page, often encounter picture adaptive problem, the actual work can be done to the browser to complete it, but unfortunately, whether it is IE or Firefox in the picture adaptive This problem is not handled satisfactorily, Web page image width and height of the method is also many.

Today the introduction of this is the use of CSS to complete, according to the actual application effect, the use of JavaScript or more reliable, because the CSS expression is a bit annoying, small part refers to the use of the effect is a bit annoying, only for your reference use.

Using CSS to achieve adaptive image

The use of CSS to achieve the adaptive image is very simple, mainly by two parameters to complete, respectively, is max-width and max-height, these two parameters in Firefox and IE7 above support are very good, but in IE6 above, the effect is very bad, especially for the display of multiple pictures, The first display page most difficult to achieve the image of adaptive effects, are generally some can be self-adaptive, some can not adapt, many times the refresh may also show OK, that is enough annoying, and once the display of multiple pictures, ie 6 on the card of the deadly (expression on the Internet is more occupied resources, Feel design is used to play, Firefox adaptive effect or relatively good, speed is very fast), anyway I have not found a better CSS method to make IE 6 perfect support image adaptive.

The sample code is as follows:

img{    max-width:128px;    max-height:128px;    Height:auto;    Zoom:expression (function (e) {if (e.width>e.height) {if (e.width>128) {e.height = e.height* (128/e.width); e.width = 128; }}else {if (e.height>128) {e.width = e.width* (128/e.height); e.height=128;}} E.style.zoom = ' 1 ';     } (this));         Overflow:hidden; }

The above code format requires special attention to two points:

• The width and height assignment in the zoom attribute cannot be taken with units (such as PX), otherwise invalid;

• If and ELSE statements must also be enclosed in curly braces, but not in the same order (and in many programming languages, a sentence can be used without braces);

The last way to place a background image:

First of all, look at your background image size, if very large, the general situation of a lot of monitors will display the appropriate.

If you want to adapt to a mobile device, use one of the CSS3 properties

Background-size:cover;

Yes, you can fill the entire browser window with the background image based on the window size.

OK, these are the three commonly used methods of image adaptation in HTML, and questions can be asked below.