在项目开发中遇到的问题。
从下面图中，可以发现存在明显的抖动现象。
原因分析
为什么会出现这样的问题呢？
因为图片是在DOM结构渲染完成以后调用的，这时候网页中一些资源还没有加载，比如图片等资源，但是DOM结构已经渲染成功了 。DOM结构在渲染时，进行了以下的工作：
在layout布局时,有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。换句话说，在layout时，已经知道了各个节点的尺寸和坐标。 对于img标签，根据以下例子，我们可以知道img标签宽高是按原图尺寸大小自适应的，设置了宽就能得到高，设置了高就能得到宽。在同时设置宽高的条件下，会按照设置的宽高进行显示。
在DOM结构渲染完成时，img图片尚未加载，此时我们并不知道图片的宽高比，高度会默认为0。当图片加载完成后，已经知道图片的信息了，会重新计算，并进行重绘，所以会出现抖动现象。
如何解决
padding和margin的值为百分比时，无论padding-top||padding-bottom||padding-left||padding-right是根据父元素的宽度进行设置的。根据这个性质，可以利用padding-top和padding-bottom作为占位符。
做法很简单，就是img外面加一个wrapper，并进行如下设置，width和padding-bottom设置图片的宽高比。(项目中图片的宽高比是100%：38%)
.wrapper
width:100%
height:0
padding-bottom:38%
实现效果如图所示：
