div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）

Bertha 。 2022-06-15 09:45 386阅读 0赞

本人对前端处理不是很牛，所以转载这文章。原文地址：http://www.divcss5.com/wenji/w632.shtml  
  
  
DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用 [CSS][]固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？ [CSS图片][CSS 1]缩小不变形，图片自动缩小，图片按比例等比例缩小不变形解决。

**解决方法有两种：**  
第一种，让图片和布局宽度高度成等比例，这样CSS设置死[宽度][Link 1]和[高度][Link 2]，图片也是等比例缩小，图片也不会变形。

比如淘宝，要求店铺主上传产品封面图片是正方形的，为什么，因为图片宝贝展示列表都是正方形的排版布局，这样要求上传合适正方形宝贝封面图片，也是让图片不变形。

所以有条件的情况下，大家将首页、图片列表页的布局宽度高度保持一致，上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。

第二种，使用[CSS max-width][]和[max-height][]实现图片自动等比例缩小  
很简单我们要使用到[max-width][CSS max-width]和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。

以下DIVCSS5通过实例对比方法让大家掌握CSS控制图片缩小不变形技巧。

### 一、原始描述   -   TOP ###

这里有个[DIV盒子][DIV]（[DIV class命名][DIV class]为”divcss5”）[CSS宽度][Link 1]和[CSS高度][Link 2]方便为300px和100px同时设置1px黑色边框，里面放了一张图片（图片原始宽度650px为高度为406px）。并通过CSS固定死图片宽度高度。

1、[HTML源代码][HTML]：

<!DOCTYPE html> 
       <html> 
       <head> 
       <meta charset="utf-8" /> 
       <title>图片缩小不变形实例 www.divcss5.com</title> 
       <style> 
       .divcss5{ border:1px solid #000; width:300px; height:100px} 
       .divcss5 img{width:300px; height:100px} 
       </style> 
       </head> 
        
       <body> 
       <div class="divcss5"> 
       <img src="img.jpg" /> 
       </div> 
       </body> 
       </html>

2、CSS固定死图片宽度高度实例截图  
原始图片展示：

![原始图片截图][1_131023133621_1.png]  
原始图片截图

![css固定宽度高度后变形的图片截图][css]  
css固定宽度高度后变形的图片截图

3、小结，通过CSS固定对象内图片高度宽度，这样图片如果不是等比例缩小，那么图片就变形了。

### 二、CSS解决图片缩小不变形实例   -   TOP ###

使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width > 300 ? “300px” : this.width);或者height:expression(this.height>100?”100px”:this.height);。

解决[IE6支持max-height][IE6_max-height]  
[div css解决IE6支持max-width][div css_IE6_max-width]

一般情况下只需要设置好宽度限制，比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用[overflow:hidden][overflow_hidden]隐藏溢出图片，同时为了兼容IE6我们设置个width:expression(this.width > 300 ? “300px” : this.width);解决即可。

1、具体解决[DIV+CSS][CSS]实例代码如下：

<!DOCTYPE html> 
       <html> 
       <head> 
       <meta charset="utf-8" /> 
       <title>图片缩小不变形实例 www.divcss5.com</title> 
       <style> 
       .divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden} 
       .divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);} 
       </style> 
       </head> 
        
       <body> 
       <div class="divcss5"> 
       <img src="img.jpg" /> 
       </div> 
       </body> 
       </html>

2、浏览器测试效果截图

![图片缩小后不变形截图][1_131023133724_1.png]  
css图片缩小等比例缩小后不变形截图

3、缺点介绍，如果使用此方法，兼容各大浏览器不变形，但图片不是完整显示的。  
相关知识介绍：  
[ CSS解决图片撑破DIV][CSS_DIV]：[http://www.divcss5.com/wenji/w364.shtml][CSS_DIV]  
[ CSS图片不超过网页宽度][CSS 2]：[http://www.divcss5.com/jiqiao/j52.shtml][CSS 2]

4、在线演示：[查看案例][Link 3]

5、实例打包下载

[立即下载 （53.883KB）][_53.883KB]

### 三、css图片大小缩小不变形总结   -   TOP ###

[CSS DIV][CSS]图片缩小不变形总结：最好解决方法就是从设计图片本身出发，将图片设计成与布局中宽度高度成等比例图片，比如你布局时候图片宽度为300px，高度为200px,那你设计图片素材时候提交添加的图片宽度高度本身可以为600px宽，400px高，或900px宽600px高,这样等比例的图片才能保证真正图片缩小后不变形，显示完整。

如需转载，请注明文章出处和来源网址：[http://www.divcss5.com/wenji/w632.shtml][http_www.divcss5.com_wenji_w632.shtml]

[CSS]: http://www.divcss5.com/
[CSS 1]: http://www.divcss5.com/jiqiao/j242.shtml
[Link 1]: http://www.divcss5.com/rumen/r119.shtml
[Link 2]: http://www.divcss5.com/rumen/r123.shtml
[CSS max-width]: http://www.divcss5.com/rumen/r423.shtml
[max-height]: http://www.divcss5.com/rumen/r422.shtml
[DIV]: http://www.divcss5.com/rumen/r319.shtml
[DIV class]: http://www.divcss5.com/jiqiao/j4.shtml
[HTML]: http://www.divcss5.com/html/h26.shtml
[1_131023133621_1.png]: /images/20220615/ceae1c50fe954b47a72fe5b82a9207b4.png
[css]: /images/20220615/c4dc06aa410f4b219f16d7f09d084590.png
[IE6_max-height]: http://www.divcss5.com/jiqiao/j299.shtml
[div css_IE6_max-width]: http://www.divcss5.com/wenji/w194.shtml
[overflow_hidden]: http://www.divcss5.com/rumen/r414.shtml
[1_131023133724_1.png]: /images/20220615/856e06ce3fb3413092cc34a51859ceeb.png
[CSS_DIV]: http://www.divcss5.com/wenji/w364.shtml
[CSS 2]: http://www.divcss5.com/jiqiao/j52.shtml
[Link 3]: http://www.divcss5.com/yanshi/201310/2013102301/
[_53.883KB]: http://d.divcss5.com/divcss5/down/2013102301.zip
[http_www.divcss5.com_wenji_w632.shtml]: http://www.divcss5.com/wenji/w632.shtml