为响应式设计缩放 iframe，仅限 CSS [英] Scaling iframes for responsive design CSS-only

问题描述

许多网站都嵌入了 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>

就是这样.

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

解决方案

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

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

还有你的样式表:

#outer{最大宽度:640px；最大高度:360px；宽度:100%；高度:100%；}#内{高度:0px；填充底部:56.25%；}#内部iframe{宽度:100%；高度:100%；}

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

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

这是一个 JSfiddle 的工作原理.

A lot of sites have embedded Youtube videos. Youtube works on phones now. If responsive design is going to be a thing, why shouldn't it be a thing for iframes that contain Youtube videos?

After searching for days (on and off) I couldn't find a clear, simple solution to the problem (I'm new to HTML/CSS). It's easy to scale iframe width, but to keep height relative I found chunks of javascript, jQuery, and php, all pretty esoteric to a beginner at web design. I wanted a simple method of scaling an iframe's height to always keep a certain aspect ratio, no matter how the width changes.

To keep this from being an unanswered question, the method's below. Here are the initial settings for your iframe:

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

That's it.

I was wondering if anyone had any other solutions as well.

解决方案

The solution was nested divs. A little hackey, I know, but it's a really easy solution to a problem that had too many solutions. Youtube videos keep an aspect ratio of 16:9 in this example. Your HTML should look like this:

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

And your stylesheet:

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

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

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

The outer div sets the maximum height and width and allows itself to scale, while the inner div uses the padding attribute to match its height to the width of the containing div (I'm pretty sure). The value should be set at (height*100/width)%, the ratio of the height to the width. The iframe then stretches to fill the whole containing div. Whitespace fills on web, so you should be just fine putting text underneath.

I can't remember exactly where I found it. It was done with images somewhere else on Stack Overflow, but I think it's relevant to have it set up to work for iframes since embedded Youtube videos are so common.

Here's a JSfiddle with the working thing.

这篇关于为响应式设计缩放 iframe，仅限 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！