需求
我们在做web页面的时候，经常会有一些图片列表，例如下图的视频列表以及表情列表：
需求要求：
1. 列表是responsive的，在不同宽度的浏览器下面，图片要自适应容器宽度
2. 图片在自适应的过程中，图片的长宽比要保持不变
常规解决方案
在container宽度固定的需求中（比如PC版页面）,我们直接设置图片容器或者图片为固定的宽高就好了，比如：
img{ width:330px;height:180px;}
但是这个不能满足需求，为了满足上面的需求两点，通常我们会想到通过设置图片的宽度为百分比来满足第1点，不设置高度来满足到第2点（容器的height不能根据width设置百分比），简单代码如下：
视频时间的代码就不写出来了，通过绝对定位来做即可。
存在的问题
上面的解决方案虽然可行，但是条件又点苛刻，并且体验不好，为什么呢？
1. 为了做到完美显示，运营同学在配置图片的时候必须做到图片的长宽比完全一致，不能有一个像素的差别，否则会出现如下图情况：
上图中第一张图比其他三张图高一个像素，由于不能设置图片容器的高度，所以对图片大小就必须要严格控制。
2. 体验不好。当网络不佳，图片还没有加载出来的情况下，你可能看到如下图：
由于图片没有加载出来，图片没有占位，当图片加载出来后，再把容器撑高，这样的体验非常不好（特别是图片内容在首屏的时候）。
有人可能会说，使用默认图片来占位，但是有时候，在网络情况恶劣的情况下，默认图片都可能加载不出来。
优化方案
为了解决上面两个存在的问题，我想到了一种使用图片容器进行占位的方法。首先我们要了解一个css的知识点，块级元素（如div,p）的 padding设置为百分比的时候，是按照容器的宽度来定的，那么我们可以按照图片的比例来设置容器的高度（使用padding- top/padding-bottom），图片则使用绝对定位显示在容器的下层。
html:
css:
这种情况及时配置的图片有点小误差，我们也可以忽略。
使用优化方案后，当图片加载不出来的时候，容器的位置不会消失，如下图：
那么对于体验上来说，整个页面不会在图片加载的时候出现撑高的情况。
我们在做web页面的时候，经常会有一些图片列表，例如下图的视频列表以及表情列表：
需求要求：
1. 列表是responsive的，在不同宽度的浏览器下面，图片要自适应容器宽度
2. 图片在自适应的过程中，图片的长宽比要保持不变
常规解决方案
在container宽度固定的需求中（比如PC版页面）,我们直接设置图片容器或者图片为固定的宽高就好了，比如：
img{ width:330px;height:180px;}
但是这个不能满足需求，为了满足上面的需求两点，通常我们会想到通过设置图片的宽度为百分比来满足第1点，不设置高度来满足到第2点（容器的height不能根据width设置百分比），简单代码如下：
视频时间的代码就不写出来了，通过绝对定位来做即可。
存在的问题
上面的解决方案虽然可行，但是条件又点苛刻，并且体验不好，为什么呢？
1. 为了做到完美显示，运营同学在配置图片的时候必须做到图片的长宽比完全一致，不能有一个像素的差别，否则会出现如下图情况：
上图中第一张图比其他三张图高一个像素，由于不能设置图片容器的高度，所以对图片大小就必须要严格控制。
2. 体验不好。当网络不佳，图片还没有加载出来的情况下，你可能看到如下图：
由于图片没有加载出来，图片没有占位，当图片加载出来后，再把容器撑高，这样的体验非常不好（特别是图片内容在首屏的时候）。
有人可能会说，使用默认图片来占位，但是有时候，在网络情况恶劣的情况下，默认图片都可能加载不出来。
优化方案
为了解决上面两个存在的问题，我想到了一种使用图片容器进行占位的方法。首先我们要了解一个css的知识点，块级元素（如div,p）的 padding设置为百分比的时候，是按照容器的宽度来定的，那么我们可以按照图片的比例来设置容器的高度（使用padding- top/padding-bottom），图片则使用绝对定位显示在容器的下层。
html:
css:
这种情况及时配置的图片有点小误差，我们也可以忽略。
使用优化方案后，当图片加载不出来的时候，容器的位置不会消失，如下图：
那么对于体验上来说，整个页面不会在图片加载的时候出现撑高的情况。
