CSS 具有最大宽度和高度的响应式 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21647920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive iframe with max width and height
提问by Ben Foster
I have a fixed height container containing both images and iframes. To make the images responsive and preventing both vertical and horizontal overflow I can just set the following CSS:
我有一个包含图像和 iframe 的固定高度容器。为了使图像具有响应性并防止垂直和水平溢出，我可以设置以下 CSS：
img {
max-width: 100%;
max-height: 100%;
}
This ensures that a portrait image would not overflow vertically and a landscape image would not overflow horizontally.
这确保纵向图像不会垂直溢出，横向图像不会水平溢出。
For iframes, I'm using the "padding-ratio" technique, setting the padding of the wrapper element to the aspect ratio of the iframe (e.g. 56.25% for a 16:9 video):
对于 iframe，我使用了“padding-ratio”技术，将包装元素的填充设置为 iframe 的纵横比（例如 16:9 视频的 56.25%）：
.iframe-wrapper {
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
While this means that the iframe scales with the width of the viewport it does not work the same if I change the height of the viewport. Essentially I'd like the iframe to mimic how the images work.
虽然这意味着 iframe 会随着视口的宽度缩放，但如果我改变视口的高度，它的工作方式就不一样了。基本上我希望 iframe 模仿图像的工作方式。
回答by Caitlin M
For my uses (embedding videos from Vimeo on a responsive site), this works great in the browsers I've tested in:
对于我的用途（在响应式网站上嵌入来自 Vimeo 的视频），这在我测试过的浏览器中非常有效：
@media screen and (max-width: 750px) {
iframe {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
}
It doesn't require image placeholders, so it's a lot simpler.
它不需要图像占位符，因此简单得多。
回答by Erik Hopkins
This code did the trick for me:
这段代码对我有用：
<div class="video-container"><iframe.......></iframe></div>
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Source: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
来源：https: //www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
回答by Syed
Here is the fix that I feel that it might work for you but you have to compromise for "padding ratio" techniqe because that's not needed ;)
这是我认为它可能对您有用的修复程序，但您必须为“填充比率”技术妥协，因为这不是必需的；)
HTML as follows:
HTML如下：
<div class="embeded-video">
<img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" />
<iframe src="//www.youtube.com/embed/I_dN9IpmOZU" frameborder="0" allowfullscreen align="center"></iframe>
</div>
CSS as follows:
CSS如下：
.embeded-video {
position: relative
}
.embeded-video .ratio-img {
display: block;
width: 100% !important;
height: auto !important;
}
.embeded-video IFRAME {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
回答by Matt Browne
I'm not sure if it's possible to allow the height to grow only up to a max-height, but it is possible to constrain the height and still preserve the aspect ratio. Here's the clever technique that makes it work...I didn't write this code but I used it and it seems to work quite well:
我不确定是否可以允许高度仅增长到最大高度，但可以限制高度并仍然保留纵横比。这是使它工作的巧妙技术......我没有编写这段代码，但我使用了它，它似乎工作得很好：
https://codepen.io/shshaw/pen/uzlfh
https://codepen.io/shshaw/pen/uzlfh
Copying and pasting the (slightly modified) code here for posterity... (My main modification is using vhunits instead of a percentage.)
为后代复制和粘贴（稍微修改过的）代码在这里......（我的主要修改是使用vh单位而不是百分比。）
/* Adapted from https://codepen.io/shshaw/pen/uzlfh - thanks Shaw! */
.responsive-embed {
height: 45vh; /* Set height here */
display: inline-block; /* Must be inline-block */
position: relative; /* Keep the child element contained */
/* min/max-width will break the aspect ratio, but otherwise work as expected */
/*
min-height: 200px;
max-height: 400px;
*/
}
.responsive-embed .ratio {
height: 100%; /* Our ratio canvas is expanded to as tall as the height set above. */
width: auto; /* Allows the width to adjust based in the height, keeping the aspect ratio */
visibility: hidden; /* Prevents non-transparent image or alt text from showing up */
text-align: left;
}
.responsive-embed iframe {
/* Force the child block to be same size as parent */
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important;
height: 100% !important;
}<div class="responsive-embed">
<img class="ratio" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAAAAAAeQfPuAAAAC0lEQVQYGWMYrAAAAJkAAWzZLOIAAAAASUVORK5CIIA=" alt="16x9">
<iframe src="https://player.vimeo.com/video/20732587/?api=0&portrait=0&autoplay=0&color=21abb9" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>