Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use css so that the large picture does not exceed the width of the page. I hope you will get something after reading this article. Let's discuss it together.

So that the large picture does not exceed the width of the page, so that the picture does not break the DIV width set by the CSS style!

Next, let's introduce a problem that the website will encounter when developing DIV+CSS. When publishing a large picture, it will break the div width set by itself because the picture is too wide.

The reason why the picture breaks the layout.

1. Due to the low version of the browser (Microsoft IE6)

2. The width of the div layout is not set.

Methods to solve the problem that the picture exceeds the width or breaks the div css layout

1. When posting a picture in an article, zoom out the picture editor.

2. It is recommended to set the maximum width of the displayed image by setting the css of the corresponding div

3. Set the width of the picture through css.

Use css to solve the case of picture breaking div layout.

The control code through css is as follows (cmcss is the corresponding parent class name):

.cmcss {margin: auto;width: 600px;}

.cmcss img {max-width: 100%! important; height: autoimportance; width:_expression (this.width > 600? "600px": this.width)! important;} this kind of picture cannot be displayed when it is first loaded

The code for setting the width of the content image in the corresponding div is as follows:

The width of .cmcss img {width:500px;} is customized, but this method is not recommended because all images in this div layout will be 500px in width after setting, which will cause small pictures to be enlarged and displayed blurred.

You can set the maximum width of the picture css 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;}

Note: css with "_" is not supported through other browsers, but IE6 supports it. Just can use this css hack to achieve the width of the picture now. This can only overcome the fixed width of the IE6 display to meet the compatibility of other versions.

Expansion and improvement

Let's look at the code that distinguishes CSS HACK from different browsers.

Distinguish between FF,IE7,IE6:

Background:orange;*background:green! important;*background:blue

You may want to ask, why not use "*" instead of "_" to distinguish IE6 browsers? it is worth noting that both ie6 and IE7 will explain and recognize "*", but IE7 has priority in important recognition, so IE7 will have priority to identify important in CSS code and become unique, so when there is important, both IE7 and IE6 can be preceded by "*". However, IE7 with important before or after will be recognized as the only distinguishing css hack. So when there is no important here, you need to underline the lowercase half of the css hack in IE6.

The example is as follows (Blue hills.jpg image is an 800-pixel wide picture)

Code:

Www..com case-the picture does not exceed the set width

The width of the original picture is 800PX. After setting, the following picture is 150px.

After reading this article, I believe you have a certain understanding of "how to use css so that large pictures do not exceed the width of the web page". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.