css控制图片缩放大小的方法介绍

发布时间:2019-08-09编辑:脚本学堂
有些文章内容中的图片尺寸过大,如果不加控制,则会撑开页面,带来不好的浏览体验,本文为大家介绍用css控制图片缩放大小的方法,有需要的朋友千万不要错过哦。

对于文章内容中图片尺寸较大的情况,可以采用JS来控制,不过本文为大家介绍用css来实现的方法。

有关js控制图片缩放的内容,可以参考:
图片等比例缩放的js代码
图片按比例缩放的js实现代码
js弹出页面根据图片来缩放页面大小的代码

示例:

<div class=”UBBPanel”>
<div class=”UBBTitle”>
<img src=”images/code.gif” style=”margin:0px 2px -3px 0px” alt=”程序代码”/> 程序代码</div>
<div class=”UBBContent”>.new_body .con img{vertical-align: middle;max-width: 630px; width: expression(this.width >630 && this.height < this.width ? 630: true); }
</div></div>

同样可以用对高度进行控制。
这种方法可以满足: 一个页面中,不同图片,超过所需大小时,自动缩成不同尺寸的需求。
比如:一般的cms等文章管理中,通常都有小图、大图。
而在页面上,通常需要读取同一个图片,而分不同尺寸显示。再结合 overflow:hidden; 相信图片也就不会变形了。

.pwl_spaceimg{width:160px; height:120px;overflow:hidden; }
.pwl_spaceimg img{width:150px; border:0px; padding:4px; }

首先要讲,这个效果最好用js解决。
CSS方法:

img {
max-width:400px;
_width:expression_r(this.width<400px?"auto":"400px");
}

expression是针对IE6用的,在FF和IE7+版本要用max-width哦。