css缩放图片代码 CSS自适应控制图片宽度和高度的方法

阿里云双十一活动

云服务器低至86元/年

立刻拼团

声明:本站文章多为楚狂人原创,偶尔网络转载部分内容,如有侵权请联系我们!

css自适应控制图片宽度对网页制作非常的重要,因为你不能每次发图之前都裁剪好的对吧?但是有的图片太大就会撑开网页,造成错位,那么怎么用CSS来控制图片缩放自适应大小呢?

我找到了两个比较简单的解决方法,虽然不是非常的完美,先分享出来,我会继续寻找的,

img{

border:0;
margin:0;
padding:0;
max-width:410px;
width:expression_r(this.width>410?"410px":this.width);
max-height:415px;

height:expression_r(this.height>415?"415px":this.height);

}

还有另一段代码:

 

img{
border:0;
margin:0;
padding:0;
max-width:410px;
width:expression_r(this.width>410?"410px":this.width);
max-height:410px;
height:expression_r(this.height>410?"410px":this.height);
}

两段CSS缩放图片代码各有利弊,第一段代码宽度固定,高度是自动缩放的,唯一的缺点是在IE浏览器高度不能缩放,使图片变形了。第二段代码所有浏览器都可以控制缩放,但缺点在于高度是设定死的,如果你的图片不是正方形,缩放后图片看起来也会怪怪的,暂时先用着,我会继续寻找的。

转载请注明:作者:楚狂人, 转载或复制请以 超链接形式 并注明出处 楚狂人博客
原文地址:《css缩放图片代码 CSS自适应控制图片宽度和高度的方法》 发布于2013-03-16

分享到:
赞(0) 打赏

评论 抢沙发

1 + 4 =


css缩放图片代码 CSS自适应控制图片宽度和高度的方法

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

每天拆双十一超级红包
双十一超级红包 1111

知道创宇云安全
切换登录

注册