Home > Developer > Web Develop
Let the big picture not exceed the width of the page, so that the picture does not burst through the CSS style set div width!
Next, we introduce the next site in the development of the DIV+CSS will encounter a problem, when the release of a large picture because the picture is too wide to burst its own set of div width problem.
Picture Bursting layout Reason
1, due to low browser version (Microsoft IE6)
2. The width of the div layout is not set
Resolution picture out of width or bursting div css Layout method
1, in the article when publishing pictures to reduce the image editing
2, by the corresponding Div CSS to set the display of the widest width of the picture recommended
3, through the CSS to set the width of the picture.
Solve a picture with CSS in the case of bursting div layout
Use CSS to control the code as follows (Cmcss is the corresponding parent class name):
. cmcss {margin:auto;width:600px;}
. cmcss img{max-width:100%!important; height:auto!important width:expression (This.width > 600?) "600px": This.width)!important;} The picture does not display when the image is loaded for the first time
directly through the corresponding div inside the content picture width setting code is as follows:
. cmcss img{width:500px;} width is custom, but this method is not recommended because the picture within this div layout will be all 500px in width, which will cause the image to be small and magnified to be blurred.
You can set the widest CSS for a picture by using Max-width, but IE6 is not supported, but you can use the browser's CSS hack to set the code as follows
. Cmcss img{max-width:500px;_width:500px;}
Description: CSS with "_" is not supported by other browsers, but IE6 is supported. This CSS hack can be used to achieve the width of the picture now. This only overcomes the IE6 display fixed width to match the compatibility of other versions.
Expansion and improvement
We look at the difference between the different browser CSS hack code
Difference ff,ie7,ie6:
Background:orange;*background:green!important;*background:blue;
You may ask, why not "*" instead of "_" to distinguish IE6 browser, it is worth noting that IE6 and IE7 will explain and identify "*", but IE7 to important recognition has priority, So IE7 in the CSS code important will have priority to identify and become unique, so in important time IE7 and IE6 can use the "*" number, but either with important in front or after IE7 will be recognized as the only difference between CSS hack. So there is no important when you need to use the other IE6 css hack "_" lowercase half-width underline.
The case is as follows (Blue hills.jpg picture is 800 pixels wide)
Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>www.divcss5.com case-picture does not exceed set width </title>
<style type= "Text/css" >
<!--
. cmcss img{max-width:150px;_width:150px;}
-
</style>
<body>
The original image width is 800PX, after setting as 150px
<div class= "Cmcss" ></div>
</body>
As follows:
This method for the width of the picture to set the maximum width, CSS code is less convenient, recommend this method to solve the image of the width of the bursting div css layout.
< reprint > Use CSS to make big pictures not more than page width
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
