Responsive Embeds

这个其实就是一些图片,视频等,需要异步加载到页面的东西需要responsive的时候,如果网速较慢,会出现页面抖动的现象
其实就是这些内容会动态插入造成的

这种嵌入技术就是 先用一个div 百分比的来占位置,然后等这些资源加载完成

<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>
</div>

.embed-container {
position: relative;
height: 0;
overflow: hidden;
background-color:black;
}

.embed-container img{
position: absolute;
top: 0;
left: 0;
width:100%;
}

.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* … */
}

@ratio-16-9: (9%/16%*100%);
@ratio-4-3: (3%/4%*100%);
@ratio-1-1: (100%);

.ratio-16-9{padding-bottom: @ratio-16-9;}
.ratio-4-3{padding-bottom: @ratio-4-3;}
.ratio-1-1{padding-bottom: @ratio-1-1;}