css - 拉伸(stretch) iframe 以适应宽度，同时保持高宽比(tumblr 主题)

Question

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

但是当我将高度设置为自动时，它会挤压成一个小矩形，而不是假设其正常的宽高比(正如我所想的那样)。有没有办法让 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
}

Answer 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>是，然后向容器添加填充以保持纵横比。