为响应式设计缩放 iframe 仅 CSS

Posted 2023-03-13

【中文标题】为响应式设计缩放 iframe 仅 CSS

【英文标题】：Scaling iframes for responsive design CSS-only

【发布时间】：2014-01-30 00:33:00

【问题描述】：

很多网站都嵌入了 Youtube 视频。 Youtube 现在可以在手机上使用。如果响应式设计要成为一件事，为什么不应该成为包含 Youtube 视频的 iframe 的一件事？

在搜索了几天（断断续续）之后，我找不到一个清晰、简单的问题解决方案（我是 html/CSS 新手）。缩放 iframe 宽度很容易，但为了保持高度相对，我发现了大量的 javascript、jQuery 和 php，对于网页设计的初学者来说都是非常深奥的。我想要一种简单的方法来缩放 iframe 的高度，以始终保持一定的纵横比，无论宽度如何变化。

为了避免这个问题成为一个未解决的问题，方法如下。以下是 iframe 的初始设置：

<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

就是这样。

我想知道是否有人也有其他解决方案。

【问题讨论】：

Shrink a Youtube video to responsive width的可能重复

另见this post

现在我觉得很愚蠢，因为在我需要的时候没有找到它们。

【参考方案1】：

解决方案是嵌套 div。我知道有点 hackey，但对于一个有太多解决方案的问题来说，这是一个非常简单的解决方案。在此示例中，Youtube 视频的宽高比为 16:9。您的 HTML 应如下所示：

<div id="outer">
    <div id="inner">
        <iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
</div>

还有你的样式表：

#outer
max-width: 640px;
max-height: 360px;
width: 100%;
height: 100%;


#inner
    height: 0px;
    padding-bottom: 56.25%;


#inner iframe
    width: 100%;
    height: 100%;

外部 div 设置最大高度和宽度并允许自己缩放，而内部 div 使用 padding 属性将其高度与包含 div 的宽度相匹配（我很确定）。该值应设置为(height*100/width)%，即高宽比。然后 iframe 会拉伸以填充整个包含的 div。空白在网络上填充，因此您应该可以将文本放在下面。

我不记得我在哪里找到它了。它是在 Stack Overflow 上的其他地方使用图像完成的，但我认为将其设置为适用于 iframe 是相关的，因为嵌入式 Youtube 视频非常普遍。

Here's a JSfiddle with the working thing.

【讨论】：

您需要将内部分区设置为具有相对位置，并将 iframe 设置为具有绝对位置才能使其工作。此外，如果您将顶部和底部的边距添加为零，将左右两侧的边距添加到外部分区，它将居中。

Richard Young 是正确的，请参阅这篇文章来填补空白。 ***.com/questions/25302836/…