CSS自适应图片大小的兼容性的问题分析_html-js-css

概述问题：我想通过css实现对图片大小的自适应，通过以下代码在ie7和Firefox中已经可以正常显示了，但是在ie6里面，宽比高大的（横起的）图片总是比高比宽大的（竖起的）图片矮10个xp，谁知道是为什么啊？#phto img { max-width: 130px; max-height: 110px; height:auto; zoom:expression( function(e)…

问题：
我想通过CSS实现对图片大小的自适应，通过以下代码在ie7和firefox中已经可以正常显示了，但是在ie6里面，宽比高大的（横起的）图片总是比高比宽大的（竖起的）图片矮10个xp，谁知道是为什么啊？
#phto img {
max-wIDth: 130px;
max-height: 110px;
height:auto;
zoom:Expression( function(e) {
if(e.wIDth>e.height) {if (e.wIDth>130) { e.height = e.height*(110 /e.wIDth); e.wIDth=130; }}
else {if (e.height>110) { e.wIDth = e.wIDth*(130 /e.height); e.height=110; }}
e.style.zoom = '1'; }(this));
overflow:hidden;
}
回答：
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><head><Title>站长学院 - </Title><Meta http-equiv="content-type" content="text/HTML; charset=gb2312"><style type="text/CSS">body { margin:0; padding:0; List-style: none;}.body { wIDth:800px; margin:30px auto; border:1px solID; overflow:hidden;}.body img {float:left;max-wIDth:650px;max-height:170px;vertical-align:mIDdle;border:none;}</style></head><body><div class="body"><img src="http://www.wfuyu.com/uploads/allimg/090810/1_090810151248_1.jpg" /></div></body></HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!
总结
以上是内存溢出为你收集整理的CSS自适应图片大小的兼容性的问题分析全部内容，希望文章能够帮你解决CSS自适应图片大小的兼容性的问题分析所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/web/1023157.html

CSS自适应图片大小的兼容性的问题分析

发表评论

评论列表（0条）