Use CSS to control the maximum width or height of images. Compatible with IE6, FIREFOX, etc._html/css_WEB-ITnose

Sometimes, in our articles or during the call process, pictures often appear to be too wide or too high. And the size of the picture is different, and we can't always define a width or height. The emergence of max-width and max-height has helped us a lot. However, under IE6, these two CSS properties cannot be parsed normally. While expressing our deep hatred for IE6, we can only try to solve it.

The following is a method that I usually use to solve this problem. Taking the maximum width of 400px as an example, the CSS code is as follows:

.class img { max-width:400px; width:expression(document.body.clientWidth>400?"400px":"auto"); overflow:hidden; }

Explain: .class is the name of your DIV class. Of course, the ID form #id is also acceptable. max-width: 400px, defines the maximum width as 400 pixels, adjust it according to your own situation. The maximum width is 400px under IE7, FF and other non-IE6 browsers. But it doesn't work in IE6.

width:expression(document.body.clientWidth>400?"400px":"auto"); This sentence is valid for IE6. The result is: when the image width is greater than 400px, the width is 400px , otherwise, no setting is made - that is, the width of the original image. overflow: hidden; the excess part is hidden to avoid deformation. This is the perfect solution. If it is the maximum height, then the code is as follows, still taking the maximum height as 400px as an example:

.class img { max-height:400px; width:expression(document.body.clientHeight>400?"400px":"auto" ); overflow:hidden; }

After many times of practice, this problem has been solved perfectly. No need to look for JS code. Simple right?