CSS同比例缩小图片问题

wbkt6t 2007-11-05 10:16:25

我在网上搜索到如下CSS代码
.thumbImage{
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}

我应用如下
<img src="RECO0037.JPG" width="429" height="584" class="thubImage"/>
但确没有反应,IE还提示auto未定义~~
怎么办,谢谢了~

...全文

258 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

balibell 2007-11-07

打赏
举报

首先指出 className 都不一致！
其次 expression 拼错。

拿出点诚意好不，不要把随意代码贴上来浪费大家时间。

wbkt6t 2007-11-07

打赏
举报

还是不行啊,大侠们,能给出一个完整的页面就好了,谢谢了~

balibell 2007-11-07

打赏
举报

要实现等比缩放，写js吧，下面代码是这个论坛里的一篇关于垂直对齐求助帖。应该是你希望的效果。

<!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> new document </title>

<meta name="generator" content="editplus" />

<meta name="author" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<script type="text/javascript">

<!--

function imgFix(){

    var widthRestriction = 200;

    var heightRestriction = 200;

    var allElements = document.getElementsByTagName('*')

    for( var i=0; i < allElements.length; i++){

        if(allElements[i].className.indexOf('imgBox') >= 0){

            var imgElements = allElements[i].getElementsByTagName('img')

            for( var j=0; j < imgElements.length; j++){

                if( imgElements[j].width > imgElements[j].height ){

                    imgElements[j].height = imgElements[j].height * (widthRestriction/imgElements[j].width)

                    imgElements[j].width = widthRestriction

                }else{

                    imgElements[j].width = imgElements[j].width * (heightRestriction/imgElements[j].height)

                    imgElements[j].height = heightRestriction

                }

            }

        }

    }

}    

window.onload = imgFix

//-->

</script>

<style type="text/css">

body{margin:0px;padding:0px;}

ul{list-style:none;margin:0px;padding:0px}

.imgBox li{position:relative;width:200px;height:200px;background:#ccc;border:1px solid #666;line-height:200px;float:left;margin:10px;display:inline}

.imgBox img{max-width:200px;max-height:200px;}



/* Vertical align Middle 

ex:

<div class="vm"><div class="vma"><div>

#content#

</div></div></div>

--please set the height attribute in addition before using it. height:100px for example.

*/

.vm, .vm .vma div{height:200px}

.vm{position:relative;}

.vm .vma{+position:absolute;top:0px;+top:50%;+left:50%;display:table;margin:0px auto;}

.vm .vma div{+position:relative;+top:-50%;+left:-50%;display:table-cell;margin:0px auto;text-align:center;vertical-align:middle;+height:auto !important}

.vm .vma img{+margin-top:4px;}

.bd{border:1px solid red}

</style>

</head>



<body>

<ul class="imgBox">

<li class="vm"><div class="vma"><div><img src="http://www.ddcat.net/tebie/coco/img/coco_20070618_03.jpg" /></div></div></li>

<li class="vm"><div class="vma"><div><img src="http://img.china.alibaba.com/news/upload/3000103/news/2007/11/5/112x168_1160eec4283.jpg" alt="img" /></div></div></li>

<li class="vm"><div class="vma"><div><img src="http://www.ddcat.net/bbs2007/images/style_1/zh-cn/redirect_logo.gif" alt="img" /></div></div></li>

<li class="vm"><div class="vma"><div><img src="http://www.ddcat.net/blog/templates/ddcat2007/img/logo.gif" alt="img" /></div></div></li>

</ul>

<div class="" style="clear:both"></div>

<div class="" style="border:1px solid red">sdf</div>

</body>

</html>

balibell 2007-11-07

打赏
举报

上面这段代码逻辑有问题，死循环了。而且根本不可能实现不同浏览器的兼容。

这是我的修改结果，firefox下无效。

<!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> new document </title>

<meta name="generator" content="editplus" />

<meta name="author" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<style type="text/css">

@import url("http://style.china.alibaba.com/css/blog/alicn_bb.css?t=0708241");



.thumbImage{   

max-width:50px;   

max-height:50px;   

}   

*html .thumbImage{   

width:expression( document.getElementById("fr").offsetWidth > 50 && document.getElementById("fr").offsetWidth > document.getElementById("fr").offsetHeight ? "50px": "auto" );

height:expression( document.getElementById("fr").offsetHeight > 50 ? "50px": "auto" );

}   

</style>





</head>



<body>



<img  src="http://img.china.alibaba.com/news/upload/blog/170*130/01_1194260418326.jpg" width="190" height="227" class="thumbImage"/>

<div id="fr" style="float:left;"><img  src="http://img.china.alibaba.com/news/upload/blog/170*130/01_1194260418326.jpg" width="190" height="227"/></div>



</body>

</html>

zjuwwq 2007-11-06

打赏
举报

html>thumbImage{max-width:50px;max-height:50px;}
.thumbImage{width:expression(this.width>50?"50px":this.width);height:expression(this.height>50?"50px":this.height);}

wbkt6t 2007-11-06