CSS如何实现图片等比例缩放不变形（代码实例）

在工作中经常需要对图片进行缩放，但有些缩放会让图片变形，所以今天就给大家介绍CSS如何实现图片等比例缩放不变形，正在学习CSS的小伙伴赶紧过来看看吧！

 

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

 

下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ，具体代码如下所示：

<img src="../images/bg1.jpg"alt=""/>

      img {

           /*等宽缩小不变形*/

           /*width: 100%;*/

           /*二选一*/

           /*等高缩小不变形*/

           height: 100%;

       }

补充：CSS控制图片大小不变形

方法一、(不错，我正在用)

img {max-width:630px;myimg:expression_r(οnlοad=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

设置最大宽度是630px 如果大于630就把图片宽度设置为630 高度就会随着比例也会缩小 不会造成图片变形