css 图片缩放不变形

在写前端页面的时候 刚开始我们写静态页面的时候会将图片宽高固定，找比例相同的图片放上去来保证图片不变形 ，可是在真正的项目中 会碰到一个问题 就是图片是动态上传的 不可能所有的图片都能正常显示 可能会出现变形

如果用的不是img标签 对于图片可以用background 里面有一个属性是background-size:cover;然后将标签设置固定高宽，这样超过容器大小的图片就不会出现变形，但是可能会出现图片展示不完整的情况。（至少图片不会变形）

如果使用的是img标签的话 有点麻烦 我试了网上说的用max-width:100%;height:auto;min-width:100%;图片倒是不会变形 但是如果是不同大小图片最后展示在页面上的大小也是不一样的，反正就是没有做到固定高宽，然后 用了一种 至少看起来会好一点 就是固定高度 宽度虽然不一样但是出来的效果看起来比较整齐，比较实用。height：固定值；max-width ：100%

还有一种是width:固定 ，height:0，然后用padding-bottom去顶(值为你想要图片高度)，这个方法也可以用 效果和background差不多 出来的图片可能不完整 ，但是上次我使用的时候效果没出来 我也不知道原因是什么。。。

希望有大神能发现一种方法 既能保证图片完整性又能保证图片整齐性

 4月3号新增如下；打算从前端基础开始巩固 然后在别的文章那里看到了 这个就截了图；这个是background-size的几个属性；可能以前没有注意过，要好好学习 打好基础；css还是很强大很好用的

 

 

转载于:https://www.cnblogs.com/haijuanya/p/10413852.html