H5页面布局之图片液态化（自适应）处理简述

写在前面

我们都知道，页面的布局分为静态布局和响应式布局，为什么响应式布局很火呢？因为在过去我们在处理不用终端之间的页面布局问题的时候，都是使用好几套代码来实现，举例子来说，假设我们做一个app或者web应用，那么我们必须要面对的一个问题是用户使用什么终端访问？如果是PC，我们需要用960PX-1204PX的布局方式来写，那么如果用户使用ipad呢？768-1024px，使用手机呢？再分的细一点，如果用户使用的是ipadmini还是pro还是air呢？当这些问题通通出现的时候，我们会发现，我们之前解决问题的办法已经达不到现实的要求了，怎么办呢？响应式的布局就出现了！那么我们今天其实不是要讲怎么实现响应式的布局，等到我总结完毕的时候，我会写一个详细的教程出来，今天我们简单的讲一下响应式布局中的图片处理问题。

示意图

我们拿一张比较大的图片和一张比较小的图片来做例子，首先是一张比较大的图片，我用我公司地址的一张俯瞰图（我在杭州滨江，喜欢交朋友，距离近的可以找我玩，我请客，哈哈！）：

再用一张比较小的图片：

我先说一下我们平常怎么处理的

我们一般写一个div或者是别的元素，准备将一张图片作为背景图的时候，我们会这样写：

css源码：

.test1{height: 40rem;width: 30rem;background-image: url(img/slide3.png);}

H5源码：

<div class="test1"></div>

对吧，这是最普遍的一种做法，不做任何的处理，效果是怎么样的呢？

图片变形，当然还有很多的时候图片会出现失真的情况，所以基于这些问题，我们怎么简单的处理一下：

首先我们简单的做几个例子：实现一个这样的效果：

手机端实现这样的效果：

ok，实现这样的其实就是基本可以满足我们的需求，可以根据自己的定义的大小来铺满同时图片不变形，我们看源码：

css源码：

div img{max-width: 100%;height: auto;}

H5源码：

<div id="" style="width: 5rem;height: 100%;"><img src="img/slide3.png" ></div><div id="" style="width: 20rem;height: 100%;"><img src="img/slide3.png" ></div><div id="" style="width: 35rem;height: 100%;"><img src="img/slide3.png" ></div><div id="" style="width: 40rem;height: 40rem;"><img src="img/slide3.png" ></div>

有人看过源码会说了，这不是耍人吗？其实不是的，最简单的适应就是这样的，这也是最简单的一种处理办法，有人说了，有的时候我们需要的是将一个logo铺满是不是也是可以的，logo的处理可以这样：

假设这是一个logo：

那么实现这种效果其实也很简单：

css源码：

.logo{ display:block;width:100%;height:40px;text-indent:55rem;background-image: url(img/slide3.png);background-repeat:no-repeat;background-size:100% 100%;}

H5源码

<div class="logo" style="width: 7rem;"></div>

这里简单的解释一下：

background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸

注意事项

下面讲一下用的时候需要注意的几个地方：

第一：

如果您的代码是这样的：

<div id="" style="width: 5rem;height: 4rem;"><img src="img/slide3.png" ></div><div id="" style="width: 20rem;height: 15rem;"><img src="img/slide3.png" ></div><div id="" style="width: 35rem;height: 20rem;"><img src="img/slide3.png" ></div><div id="" style="width: 40rem;height: 40rem;"><img src="img/slide3.png" ></div>

效果会是这样：

可以看出来和之前的区别是中间的空间变得很大，这是为什么呢？因为我们使用具体的数值+rem的时候，他会将布局的空间展示为那么大，那么我们的style里面已经设置好的是height为auto，什么意思呢？就是css为什么保证图片不会变形，还要不失真，只能将图片等比缩放，那么等比缩放的时候就意味着有一些地方是不会出现图片的，所以只能是空白来填充！那么怎么解决这样的问题呢？我们可以不设置高度，或者设置的时候将高度用百分比表示就行了！

第二：

我们使用比较小的图片的时候，我们设置一个比较大的宽度的时候，图片是没办法完全填充的，举个例子：

<div id="" style="width: 5rem;height: 100%;"><img src="img/slide1.jpg" ></div><div id="" style="width: 20rem;height: 100%;"><img src="img/slide1.jpg" ></div><div id="" style="width: 35rem;height: 100%;"><img src="img/slide1.jpg" ></div><div id="" style="width: 70rem;height: 40rem;"><img src="img/slide1.jpg" ></div>

效果：

这是之前的比较小的图片，认真的可以发现我们最后一张是和之前的一张的宽度一样的，那么其实我们设置的时候不是的，我们写的是70rem的宽度，为什么会出现这样的情况呢？是因为我们在设置一个比原图宽度还要宽的数值的时候，图片会出现失真的情况，为了避免这样的情况出现，所以他会显示原图的大小，而不会变化的很大！

最后关于rem的使用我们可以看一下这个人的博客：

怎么使用rem

关于不同终端的尺寸问题，可以查看这个网址：

不同终端屏幕尺寸展示

ok，今天写的比较仓促，写的可能有一些不是很清晰，有什么不明白的可以直接博主简介那里QQ联系我，或者直接扫我的名片联系我，能帮的我尽力帮！共同进步！

谢谢阅读

我的名片：