Question

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

Answer 1

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

＆＃13;

/*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%;
}

＆＃13;

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

＆＃13;

基本上，您需要设置<iframe>所需的宽度，然后在容器中添加填充以保持宽高比。

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

1 个答案: