我正在尝试制作 iframe
内部响应 div
,网络上有很多关于如何执行此操作的资源,但常见的解决方案不适用于我的 YouTube 视频嵌入案例。
我正在使用骨架 CSS 样板。我有一个嵌套的 div
结构如下:
<div class="container">
<div class="row item">
<div class="six columns">
<iframe> </iframe>
</div>
<div class="six columns">
<iframe> </iframe>
</div>
</div>
</div>
iframe
突出到包含 div
的右边缘之外(类 .six.columns
)所以我尝试了以下两个 css
策略(如下)。
然而,对于这些策略中的每一个,<iframe>
变得巨大,并且似乎已经占据了 .container
的宽度div
(或者可能是 .row
div
),而不是直接父代, .six.columns
div
.
div > iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
和
div.six.columns iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
我只想要 <iframe>
响应地适应 .six.columns
div
.我怎样才能做到这一点?
最佳答案
将容器设置为 position:relative
以使 absolute
起作用。
要保持视频宽高比,将 iframe
包装到另一个 div
中,并使用 padding
技巧。假设视频是 16:9
,padding-bottom
值将为 9/16=56.25%
。下面是简单的演示。
https://jsfiddle.net/dfkhkLhp/
.youtube {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="youtube">
<iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
关于css - iframe 拒绝在容器 div 内响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34447208/