分享CSS中等比例缩放图片

HTML/CSS 2012-06-03 css,缩放,图片

CSS原来只能给图片定义一个固定值,很难做到等比例缩放。因为这里边涉及到运算,而CSS语言中一直都不存在运算的写法。

由于建站中有几块地方需要CSS控制图片等比例缩放,想到今日CSS3高调宣传,感觉CSS3应该能完成此功能。于是上网搜了搜,果然有CSS等比例缩放图片的方法,可惜它并不是CSS3的新特性,但也能用。

<style type="text/css">
img {
	max-width:600px;
	max-height:600px;
	scale:expression((this.offsetWidth > this.offsetHeight)?(this.style.width = this.offsetWidth >= 600 ? "600px" : "auto"):(this.style.height = this.offsetHeight >= 600 ? "600px" : "auto")); 
	display:inline !important;
}
</style>

如果你也需要用CSS控制等比例缩放图片,可以把以上代码引用到你的程序中即可。

以上代码中宽与高只是给了一个最大值,可以根据自己的需要修改。第三行就是缩放代码,里边的值也应一并修改。

虽然以上代码还是借用JavaScript完成,但还是感觉挺不错了。

文字链接:《分享CSS中等比例缩放图片

文章地址:http://www.qttc.net/20120666.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3