设计出了很牛逼的设计稿，客户确认了，前端静态制作也出来，还原设计稿95%以上，客户也确认了。
那是个完美啊！
！
做完程序了，交给客户了。然后客户自己上传了图片了。那个悲催啊！
！
惨不忍睹啊！
！
完备和设计稿两码事？图片不好看，到处都跑位。
客户就骂过来了，你们是否也碰着这样的事情？由于客户的公司没有设计师啊，哈哈，这个问题可能碰着的不少。
实在大家都会说，这归根到底都是客户没有处理图片的问题所造成的。然后大家都推来推去。
那么，前端制作工程师是否有办法办理这样的问题，实在是可以的。如果因图片问题导致布局变了，办理了这个问题就只剩下图片的都雅性，那这个就可以跟客户说你要请个设计师帮你处理图片啊。这样不就办理问题了吗？
这种办法和微信朋友圈的九宫格图片展示办法类似，只显示图片中间的内容，其他的将会被隐蔽。
举个栗子：
这个列表是不是很整洁，看起来比较舒畅，虽然图片有那么点点的变形，但不影响阅读。
如果个中有一张图片的尺寸轻微有一点点不一样，肯定会涌现跑位的情形。就像下面这样。这样客户看到不被投诉才怪哦！
！
那么就以这个来说说办理办法。
大家都知道图片有一种特性，便是当图片的宽度改变时，高度也会随着等比例在改变。
例如：一张宽高都为100px的图片，如果把宽度调至200px，那么高度是不是也会随之变成200px；没错的，便是利用这个特性来办理布局乱的情形。
这里就拿上一次说到的 “图文列表 纯css布局” 那次说的布局来说说，由于都是做好，和上面那个图类似。偷偷
效果是这样的：
如何切出占位图呢？如下操作
用PS打开文件，用裁剪工具把图片完全的裁下来，如下图
裁完成，再点击菜单栏目 “图像 > 图像大小” 或 按着 Alt键，再点两次 I 键。可以调出 “图像大小” 弹窗。
可以看到 “像素大小” 的宽度和高度都为260px，那么只要调个中一个就可以，就可以达到等比例调度。
我们先调成10px，确定后，再把图层的 “小眼睛” 关掉，另存为一个 png24 的透明图片，记得哦！
！
一定是要png24的。名字自己定啦！
！
然后把 img 中的图片路径改为如下：
<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是创造原来的图片不见的，变成空缺的，但是原来的布局构造没有改变。实在要的便是这样的效果。
然后我们在 img 的外层再包个div，就拿这个div来放图片。顺便加个背景色看看效果。
<a href="">
<div style="background: #000;">
<img src="rect.png" alt="" width="100%">
</div>
</a>
看，占位图片的效果出来了。外层div的宽度和高度都被img撑开了。是不是达到了想要的效果。
关键的时候来了。便是处理图片。我们要把产品图片做为背景的形式输出即可以。把图片的路径写在div上面的就办理了。再加上css3新属性就可以了。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic001.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
用背景样式 background-image 定入路径。再添加一个 cover-img 的类名。然后 cover-img 的样式如下：
.cover-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
把稳、把稳、把稳，中要的事说三遍。重点就在于 css3 的新属性 background-size: cove；
这个属性便是会把背景图片，以等比例的形式保持图像本身的宽高比例，将图片缩放到恰好完备覆盖定义背景的区域。
是不是不明白，那就对了，挺不好理解。最好还是用实际效果来看看。
终极出来的效果便是和最开始的那张图片一样的，只是看不出来而已。
那么我们就来玩真的。直接上网整一张大图的路径放进去看看就知道了。
上某某网站找特大尺寸的图片来，例如下面这张：尺寸是2533x1583，够大了，也不是正方形哦！
！
我们一开始说的都是正方形，现在弄个不是正方形的图片来试试效果。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic002.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
变动url里的路径即可
出来的效果如下：
是不是自动调度了。
我们再换一张高形状的图片。二哈图：尺寸是2448x3264
HTML：如下
<a href="">
<div class="cover-img" style="background-image: url(pic003.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
终极效果：
怎么样，效果还可以吧！
！
不知道你们看出了什么了没有。
第一张是宽形状的图片，因此高度填满 div 的区域。
第二张是高形状的图片，因此宽度填满 div 的区域。
全都是靠着 background-size: cover; 这个属性办理了。但也是有不好的地方。
例如不支持IE浏览器，图片显示不全，多一个文件做事器要多要求一次.....等等问题！
！
做图时的内容尽可能在正中间。
然后，不管客户上传什么鬼形状的图片，都不会产生布局变乱的情形。
获取《vue3.0大公司后台管理系统开拓 正规开拓流程项目实践》视频，
请点击下面 “理解更多” 或 请关注微信"大众号《手把手撸码前端》
