关于图片等比压缩问题

有时候上传图片占位是固定的但是图片大小不确定，这个时候如果用CS固定死图片大小就容易出现失真现象。

解决方法有两种：

第一种，让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也不会变形。

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

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

第二种，使用CSS max-width和max-height实现图片自动等比例缩小

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

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

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

缺点:如果使用此方法，兼容各大浏览器不变形，但图片不是完整显示的。

转：https://www.w3cways.com/957.html