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

Today, I would like to share with you the relevant knowledge points about how to set css pictures not to exceed the width of the web page. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

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 CSS format!

Then, let's introduce that the website will encounter a title problem when developing DIV+CSS. When publishing a large picture, it will break the title problem of its own configured div width because the picture is too wide.

The cause of the picture breaking the layout

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

2. The width of div configuration without setting equipment.

Delusional picture spans width or breaks through div css construction

1. Reduce the size of the picture editor when the picture is announced in the article

2. Set the widest width of the picture exposed by the equipment by setting the css of the corresponding div.

3. Set the width of the picture through css.

Through css to deal with the case of pictures breaking through the div agency.

The control code via 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 loaded for the first time.

Directly set the equipment configuration code for the width of the form picture in the corresponding div as follows:

The width of .cmcss img {width:500px;} is customized, but this door path is not recommended, because after setting the equipment, the picture in this div structure will be all width 500px, which will make the picture small and will be enlarged and blurred.

You can set the equipment by setting the widest css to the picture, but IE6 does not approve of it, but you can use the reader's css hack to set the code as follows

.cmcss img {max-width:500px;_width:500px;}

Note: css with "_" is not supported by other hunters, but IE6 supports it. It is possible to complete the width of the picture through this css hack. Here, you can only extract the fixed width of the IE6 display to suit the compatibility of other versions.

Reduction and progress

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

Distinguish between FF,IE7,IE6:

Background:orange;*bac kg round:green! important;*background:blue

In general, you have to ask why there is no need for "*" to replace "_" to distinguish IE6 readers. It is worth noting that ie6 and IE7 city text and identification "*", but IE7 has priority in important identification, so IE7 has important in CSS code will have priority identification and become unique, so when there is important, IE7 and IE6 can be followed by "*". However, no matter before or after the important, the IE7 will be recognized as the only distinguishing css hack. So when there is no important, you need to underscore the lowercase half of the "_" in another IE6 css hack.

Examples are as follows (Blue hills.jpg pictures are 800pixel wide)

Code:

Css5.com.cn case-the picture does not exceed the set width

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

These are all the contents of the article "how to set the picture not to exceed the width of the web page" in css. Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.