The image automatically changes with the DIV size.

Make web pages, Forum textures, and write blogs. As long as you have the opportunity to upload images, you will often encounter this problem. If you accidentally upload an image larger than the layout, the content will be covered, and the layout will be messy.

The general CSS processing method relies on over-flow: hidden. However, this method has a disadvantage that the running content will be hidden. If the text is hidden, you will not be able to see it.

Here is a solution that uses CSS to adjust the image size automatically. In fact, both the max and Min size settings are supported in Mozilla browsers. As long as CSS is processed in this way, the maximum or minimum length and width of any element can be limited.

But the great Microsoft does not support this command, so we have to lengthen it.ProgramCodeThe entire code becomes long, because Javascript is inserted in it.

Open the CSS file of your website and enter the following code:

. IMG { Max-width: 600px; Myimg: expression (onload = function (){ This. style. width = (this. offsetwidth & gt; 600 )? "600px": "Auto "}); }

You can set 600 to any width you want.

If you only want to restrict images in a region, enter:

. # Div IMG { Max-width: 600px; Myimg: expression (onload = function (){ This. style. width = (this. offsetwidth & gt; 600 )? "600px": "Auto "}); }

# Div is the ID of the region, which means # This setting applies to all the elements marked as IMG under the div. So we can see the results.