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

2018-03-3116:36:56网页制作Comments2,820 views字数 605阅读模式

css自适应控制图片宽度对网页制作非常的重要,因为你不能每次发图之前都裁剪好的对吧?但是有的图片太大就会撑开网页,造成错位,那么怎么用CSS来控制图片缩放自适应大小呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

我找到了两个比较简单的解决方法,虽然不是非常的完美,先分享出来,我会继续寻找的,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

img{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

border:0;
margin:0;
padding:0;
max-width:410px;
width:expression_r(this.width>410?”410px”:this.width);
max-height:415px;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

height:expression_r(this.height>415?”415px”:this.height);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

还有另一段代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

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);
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

两段CSS缩放图片代码各有利弊,第一段代码宽度固定,高度是自动缩放的,唯一的缺点是在IE浏览器高度不能缩放,使图片变形了。第二段代码所有浏览器都可以控制缩放,但缺点在于高度是设定死的,如果你的图片不是正方形,缩放后图片看起来也会怪怪的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/2839.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/2839.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定