CSS resolution image too big bursting div page method

CSS resolution image too big bursting div page method

One, prevent the picture bursting div method One
The original processing method is the picture that will be presented for processing. For example, your div width is 500px (pixels, the picture you upload or the width of the image into the page will be less than 500px, that is, your picture needs to cut the picture software, such as proportional reduction method processing and then upload, put into the Web page to solve the problem of open Div.
Common many large-scale image sites, news sites are the photo image processing to adapt to the width of the page, the picture editing processing.

Two, prevent the picture to open Div method two
If the photo method is not processed to fit the div's finite width, then the div settings can be hidden beyond the content method. Only need to set the width of the div after adding the CSS style "Overflow:hidden" can solve the hidden picture than the div part to solve the bursting div problem.

Third, the solution
Only add width to the image img tag to resolve. This can be scaled to reduce the picture, does not affect the picture picture quality.
For example, your page div width is 500px, then you upload the image to the IMG tag set width equal to 500 or less.
can solve the image too wide to cause div span burst, so the benefits can be scaled to zoom out of the picture.

Four, CSS to solve the bursting method four
This method uses the CSS directly to the div within the width of the set, so bad is if the picture is too small will affect the effect of the page to browse the picture.
DIV structure: <div class= "DIVCSS5" ></div>
Corresponding CSS code:. DIVCSS5 img{width: Width value + unit}

Five, CSS resolution picture bursting open div method five
Using Max-width (maximum width), such as your div width of 500px, then you add the maximum width CSS style "max-width=" 500px "" to solve the div style, but the IE6 browser is not compatible with this property, use caution.

Six, to solve the picture bursting div Layer Method Summary and recommendation
1), Maximum width (max-width) +overflow:hidden. We set this to allow the IE6 version of the browser to support the maximum width style, but also let IE6 under the hidden picture beyond the width of the open div to be resolved, this method is more convenient and practical.
2), only use the Overflow:hidden property, such as Method two
3), the picture using the upload time software processing, to adapt to the div layout width, such as method one
above for the recommended solution img Image Burst Limited div width method, According to the actual situation, you can arbitrarily choose to solve their own web page image bursting div layer method.