2007-3-25
利用CSS按比例缩小图片
当然，生成缩略图这个工作如果交给程序来完成，效果会好很多，但是有时出于某种因素，例如服务器不支持GD之类的，难免就要请CSS代劳。
把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。阅读全文...
对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
<img src="..." alt="..." onload="resizeImage(this)" />
<script type="text/javascript">
function resizeImage(obj) {
obj.width = obj.width > 50 && obj.width > obj.height ? 50 : auto;
obj.height = obj.height > 50 ? 50 : auto;
}
</script>
这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。
最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：
.thumbImage {
max-width: 50px;
max-height: 50px;
}
* html .thumbImage {
width: expression(this.width > 50 && this.width > this.height ? 50 : true);
height: expresion(this.height > 50 ? 50 : true);
}
至于图片是如何保持其高宽比例的，这张图片可以解释：
标签： css, Expression, max-width, web
2006-11-7
Opera下max-width与display:table-cell的显示bug
max-width和disply:table-cell是非常好用的两个CSS属性。利用max-width和max-height，可以非常方便的将网页中的图片缩小到一定尺寸，而且保证较小的图片不会被放大，图片的宽高比例也不会被强行改变。而disply:table-cell和其他的disply:table等属性结合，可以用div等标签模拟出table的结构，对于页面的排版也非常有用。
但是现在看来，Opera(9.00)对max-width的解释有些跟其他浏览器不一致。如果一个图片的原始宽度是300px，在CSS中定义它的max-width为100px，Opera确实能够按照max-width的值显示，但是这个图片在页面中所占据的实际位置却仍然按照原始宽度300px来计算。这点在普通情况下不太明显，一旦把图片放置在一个disply为table-cell的元素中，例如常规的td，或者是disply定义为table-cell的div或其他元素，问题就出来了。Opera会依照图片的原始宽度，把table-cell撑开到300px，虽然显示的图片只有100px宽。而高度却显示正常。阅读全文...
下图说明了Firefox对这种情况的显示方式，这也正式我们希望的：
而Opeera却是这样显示的：
这里有一个实例，您可以在不同的浏览器中查看本页的显示结果，当然，不要对IE抱有太大的希望。
这是一张原始图片，尺寸为300px/300px，我们把它max-width和max-height都定义为100px：
img {
max-width: 100px;
max-height: 100px;
}
把它放置在一个宽度和高度均为200px的单元格td中：
td {
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
|
|
把它放置在一个disply为table-cell，宽度和高度均为200px的span标签中，之所以选择span标签，是为了更能体现出IE的显示效果，另外，span之外需要有一个display为table的元素，我们选用一个div：
span {
disply: table-cell;
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
标签： browser-bugs, css, max-width, opera, web