0

我遇到了 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
}
4

1 回答 1

0

您可以使用简单的 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>，然后向容器添加填充以保持纵横比。

于 2015-10-05T18:44:41.510 回答