拉伸 iframe 以适应宽度，同时保持高宽比（tumblr 主题）答案

【问题标题】：Stretching iframes to fit a width while maintaining height-width aspect ratio (tumblr theme)拉伸 iframe 以适应宽度，同时保持高宽比（tumblr 主题）
【发布时间】：2015-10-05 18:21:58
【问题描述】：

我遇到了 tumblr cutom 主题创建者的问题。例如，在添加视频帖子时，他们将其放入具有设定宽度和高度的 iframe 中。我可以重置 iframe 的宽度，视频会相应地拉伸，但高度保持不变（如预期的那样）。

但是当我将高度设置为自动时，它会挤压成一个小矩形，而不是假设其正常的宽高比（正如我所想的那样）。有没有办法让 iframe 在 iframe 中保持为它设置的比率，但使用 CSS 放大/缩小它？ JQuery 也可以，但首选 CSS。

HTML

<div class="video">
    {VideoEmbed} // tumblr replaces this with an iframe containing the video
</div>

CSS（不工作）

.video iframe {
    height: auto // not working (as in, not producing desired effect)
    width: 700px // working
}

【问题讨论】：

标签： css iframe tumblr tumblr-themes

【解决方案1】：

您可以使用简单的 CSS 填充技巧来保持比例。您需要将 iframe 包装在容器元素中，并设置如下样式：

/*span*/.iframe-wrapper {
	width: 50%;
	height: 0;
	padding: 40% 0 0;
	display: block;
	position: relative;
	border: 5px solid blue;
}

	
/*span*/.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
}

<span class='iframe-wrapper'>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/XdlmoLAbbiQ" frameborder="0" allowfullscreen></iframe>
</span>

基本上，您设置您希望<iframe> 的宽度，然后向容器添加填充以保持纵横比。

【讨论】：

现在是正确的比例，但不是帖子的全长；我认为是一半（取自“宽度：50%”）。我现在如何将其拉伸到 100%，同时仍保持该比例？
另外，这似乎不起作用。初始高度和宽度都是 500px，所以比例是 1:1，但是新的 iframe 没有按 1:1 比例缩放；宽度和高度不同。
我想我根据您的建议找到了答案。我还没有用一些非方形块测试它，但我将“最小宽度”和“最小高度”都更改为“宽度”和“高度”，并将 iframe-wrapper 更改为“宽度：100% " and "padding: 100% 0 0" //EDIT: 不，这总是导致方形 iframe，我的错。
是的，您需要调整宽度/填充量以匹配您想要的纵横比。如果你想要 1:1，你可以这样做 width: 100%; padding: 100% 0 0
好吧，问题是，我不知道iframe的比例；每个 iframe 都是不同的。我希望有一种方法可以在不知道该比率的情况下扩大规模时保持该比率。