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的宽度，为什么会出现这样的情况呢？是因为我们在设置一个比原图宽度还要宽的数值的时候，图片会出现失真的情况，为了避免这样的情况出现，所以他会显示原图的大小，而不会变化的很大！
腾讯云开发者
