Heim > Web-Frontend > HTML-Tutorial > 用CSS控制图片最大宽度或最大高度 兼容IE6、FIREFOX等_html/css_WEB-ITnose

用CSS控制图片最大宽度或最大高度 兼容IE6、FIREFOX等_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:33:45
Original
1856 Leute haben es durchsucht

有时候,我们在文章中或者调用过程中,经常出现图片过宽或者过高的情况。而图片的大小不同,我们又不好一律定义一个宽度或者高度。max-width和max-height的出现,帮了我们很大的忙。然而在IE6下,这两个CSS属性都不能正常解析。 在对IE6表示深恶痛绝的同时,我们只能试着去解决。

下面给出一种方法,也是我用来解决这个问题的常用方案。以最大宽度为400px为例,CSS代码如下:

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

解释一下:.class就是你的DIV类名称,当然#id这种ID形式也可以的。 max-width:400px,定义最大宽度为400像素,具体根据自己情况调整。在IE7、FF等其他非IE6浏览器下最大宽度为400px。但在IE6中无效。

width:expression(document.body.clientWidth>400?"400px":"auto");这一句则是对IE6有效的,结果就是:当图片宽度大于400px的时候,宽度为400px,否则,不做设置??即原图宽度。 overflow:hidden;超出部分隐藏,避免变形。 到此,完美解决。 如果是最大高度,那么代码如下,仍然以最大高度为400px为例:

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

经过多次实践,很完美解决掉了这一问题。不用去找JS代码了。简单吧?

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage