Let the big picture not exceed the page width, let the picture not burst through the CSS style set div width!
Next, we introduce the next site in the development of DIV+CSS will encounter a problem, in the release of a large picture because the picture too wide will burst its own set div width problem.
Picture Bursting layout Reason
1, due to low browser version (Microsoft IE6)
2, not set the width of the div layout
Solve picture beyond width or burst div css Layout method
1, publish the picture in the article when the picture editor shrinks
2, through the corresponding Div CSS to set the width of the picture to display the widest recommended
3, through the CSS to set the width of the picture.
Through CSS to solve the picture burst div layout case
Use CSS to control the following code (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 This picture cannot be displayed for the first time when it is loaded
Set the code directly by the width of the content picture within the corresponding Div:
. Cmcss img{width:500px} width is not recommended, because the picture in this div layout will be all 500px, which will cause the picture to be small and magnified to appear blurred.
You can set the widest CSS by using max-width, but IE6 does not support it, but you can use the browser's CSS hack to set the code as follows
. Cmcss img{max-width:500px;_width:500px;}
Description: Through other browsers do not support with "_" CSS, but IE6 support. This CSS hack can be used to achieve the current width of the picture. This only overcomes the IE6 display fixed width to match the compatibility of other versions.
Expand and improve
We look at the code that distinguishes CSS hack from different browsers
Difference ff,ie7,ie6:
Background:orange;*background:green!important;*background:blue;
You may ask, why do not use "*" instead of "_" to distinguish IE6 browser, it is noteworthy that IE6 and IE7 will explain and identify "*", but IE7 recognition of important has a priority, So IE7 in CSS code has important will have a priority to identify and become unique, so in the important time IE7 and IE6 can be preceded by the "*" number, but no matter important before 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 pixel wide)
Code:
| The code is as follows | Copy 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 not exceeding set width </title> <style type= "Text/css" > <!-- . cmcss img{max-width:150px;_width:150px; --> </style> <body> The original picture width is 800PX, and the following image is set to 150px <div class= "Cmcss" ></div> </body> |
|
Screenshot below:
By using this method to set the maximum width of the picture width, CSS code is less convenient, recommend this method to solve the picture burst div css layout 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
