响应式的嵌入内容和图片

Posted yangykaifa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式的嵌入内容和图片相关的知识,希望对你有一定的参考价值。

依据被嵌入内容的外部容器的宽度,自己主动创建一个固定的比例,从而让浏览器自己主动确定视频或 slideshow 的尺寸,可以在各种设备上缩放。

这些规则被直接应用在 iframe、embed 和 object 元素上。假设你希望让终于样式与其它属性相匹配,还能够明白地使用一个派生出来的 .embed-responsive-item 类。

超级提示: 不须要为 iframe 元素设置 frameborder=”0” 属性,由于我们已经替你这样做了!

先看demo

DEMO

等比缩放的属性。基于padding.

padding的可选參数 。 % 为父元素的宽度百分比 padding-bottom:50%; 即变成了 2比1的比例了

描写叙述
auto 浏览器计算内边距。
length 规定以详细单位计的内边距值,比方像素、厘米等。

默认值是 0px。

% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。

详细实现

16比9的大小

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-youku">
<iframe class="embed-responsive-item" src="http://player.youku.com/embed/XNzQ0NzIzOTM2" frameborder=0 allowfullscreen></iframe>
</div>


css 代码

.embed-responsive {
    position:relative;
    display:block;
    height:0;
    padding:0;
    overflow:hidden
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    height:100%;
    width:100%;
    border:0
}
.embed-responsive.embed-responsive-16by9 {
    padding-bottom:56.25%
}
.embed-responsive.embed-responsive-2by1 {
    padding-bottom:50%
}
.embed-responsive.embed-responsive-4by3 {
    padding-bottom:75%
}
.embed-responsive.embed-responsive-youku {
    padding-bottom:60.93023256%
}


等比缩放图片


<div class="embed-responsive embed-responsive-2by1">
    <img class="embed-responsive-item" src="assets/images/b.jpg">
</div>


响应式图片

.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}



以上是关于响应式的嵌入内容和图片的主要内容,如果未能解决你的问题,请参考以下文章

工具Bootstrap 3.2.0的新特性

理解响应式编程

rem 响应式用法

响应式布局-Rem的用法

6.嵌入图片和分区响应图

删除 youtube 嵌入的黑色边框