问题

一般上我会在 img 元素外层包一层 div 通过设置外层元素的大小，然后设置 img 的 width 为 100% 来控制图片的实际大小，所以就有了一下这种结构

<div class="img-wrap">
  <img src="http://7xse2z.com1.z0.glb.clouddn.com/wallhaven-385041.png" alt="">
</div>

但是由于首次进入时，这个图片的高度浏览是获取不到的，所以也就撑不满外层的 div 从而导致下面的元素顶上来，当浏览器加载完图片时，外层的 div 就会被撑满，下面的元素就会被挤下去，导致首次进入页面是会闪屏。

就如同下面的效果

底部的黑色块用来测试图片的高度是否有改变，如果位置一直不变那么说明图片外层 div 高度未变化。

解决

首先设计师给的图片我们是能够知道图片的宽高比的，当然图片的具体尺寸我们是知道的，但是当外层的 div 设置的宽度为一个百分比时（比如说要在手机端整行显示），知道具体的宽高貌似没多大的用途。

解决思路一：
给外层 div 设置固定的高度，图片当背景图使用

.img-wrap{
    background:url('http://7xse2z.com1.z0.glb.clouddn.com/wallhaven-385041.png');
    background-size:cover;
}

由于设置的固定的高度，那么总有一部分情况下，图片是显示不完全的，所以这种解决方式解决的问题有限，仅仅在不需要全图显示的情况下使用。

解决思路二：
将外层的 div 高度设置成和 img 高度一致
那好问题来了：怎么才能够设置一致呢？
先将我们知道的捋一捋:

  1. 图片是占满外层 div 的
  2. 图片的宽高比

那是不是可以这么说：只要外层的div能够按照它自身的高度来设置宽度，那就解决了，对吧？

不需要使用 js ，在 css 中我们就能够做到： padding

如果 padding 的值为百分比，那么它的值是按照当前元素的 宽度+margin 来的

由于是按照 宽度+margin 来设置百分比，必须保证外层 div 的 宽度+margin 为我们想要的数值，所以应该在外层 div 外再嵌套一层 div 设置宽度，来固定内层 div 的大小。

所以就有了一下这种结构，最外层 div 确保内层 div 的百分比基准正确，内层 div 利用 padding-top 来填充高度，同时将图片定位到内层 div 的顶部，我用的图片的宽高比为 1920/1080 ，所以需要设置 padding-top 的值为： 1080/1920 = 56.25%

<div class="width-wrap">
  <div class="img-wrap">
    <img src="http://7xse2z.com1.z0.glb.clouddn.com/wallhaven-385041.png" alt="">
  </div>
</div>

<div class="box"></div>

具体的代码：