在工作中经常需要对图片进行缩放,但有些缩放会让图片变形,所以今天就给大家介绍**CSS如何实现图片等比例缩放不变形,**正在学习CSS的小伙伴赶紧过来看看吧!
下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ,具体代码如下所示:
> <img src="../images/bg1.jpg"alt=""/>> > img {> > /*等宽缩小不变形*/> > /*width: 100%;*/> > /*二选一*/> > /*等高缩小不变形*/> > height: 100%;> > }
补充:CSS控制图片大小不变形
方法一、(不错,我正在用)
> img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}
设置最大宽度是630px 如果大于630就把图片宽度设置为630 高度就会随着比例也会缩小 不会造成图片变形
方法二
> img,a img{> > border:0;> > margin:0;> > padding:0;> > max-width:590px