问题
一般上我会在 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
高度一致
那好问题来了:怎么才能够设置一致呢?
先将我们知道的捋一捋:
- 图片是占满外层
div
的 - 图片的宽高比
那是不是可以这么说:只要外层的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>
具体的代码: