CSS3图片占位，解决页面布局跑位

我们经常会遇到这样的一个问题。

设计出了很牛逼的设计稿，客户确认了，前端静态制作也出来，还原设计稿95%以上，客户也确认了。

那是个完美啊！！做完程序了，交给客户了。然后客户自己上传了图片了。那个悲催啊！！惨不忍睹啊！！

完全和设计稿两码事？图片不好看，到处都跑位。

客户就骂过来了，你们是否也遇到这样的事情？因为客户的公司没有设计师啊，哈哈，这个问题可能遇到的不少。

其实大家都会说，这归根到底都是客户没有处理图片的问题所造成的。然后大家都推来推去。

那么，前端制作工程师是否有办法解决这样的问题，其实是可以的。如果因图片问题导致布局变了，解决了这个问题就只剩下图片的美观性，那这个就可以跟客户说你要请个设计师帮你处理图片啊。这样不就解决问题了吗？

这种方式和微信朋友圈的九宫格图片展示方式类似，只显示图片中间的内容，其他的将会被隐藏。

举个栗子：

这个列表是不是很整齐，看起来比较舒服，虽然图片有那么点点的变形，但不影响阅读。

如果其中有一张图片的尺寸稍微有一点点不一样，肯定会出现跑位的情况。就像下面这样。这样客户看到不被投诉才怪哦！！

那么就以这个来说说解决方式。

大家都知道图片有一种特性，就是当图片的宽度改变时，高度也会随着等比例在改变。

例如：一张宽高都为100px的图片，如果把宽度调至200px，那么高度是不是也会随之变成200px；没错的，就是利用这个特性来解决布局乱的情况。

这里就拿上一次说到的 “图文列表 纯css布局” 那次说的布局来说说，因为都是做好，和上面那个图类似。偷偷懒。如果没看过那篇，搜一下 “图文列表 纯css布局”，就可以找到了。（如需下载源码，请关注微信公众号：JS学吧）

效果是这样的：

如何切出占位图呢？如下操作

用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大公司后台管理系统开发 正规开发流程项目实践》视频，

请点击下面 “了解更多” 或 请关注微信公众号《手把手撸码前端》