Home > Web Front-end > HTML Tutorial > Use CSS to control the maximum width or height of images. Compatible with IE6, FIREFOX, etc._html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 12:33:45
Original
1855 people have browsed it

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?

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template