在保持高宽宽高比的同时伸展内嵌框架以适应宽度（tumblr主题）

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

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

来源

2015-10-05 Thomas Wood

您可以通过使用一个简单的CSS填充伎俩保持率。你需要包装的iframe在一个容器元素，设置样式像这样：

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

 
\t 
 
/*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>

基本上，你设置宽度你想要的是，然后添加填充到容器保持高宽比。

来源

2015-10-05 18:44:41

现在它是正确的比例，但它不是帖子的全长;这是一半，我认为（从“宽度：50％”）。我现在如何将其拉伸至100％，仍保持比例？ –

此外，这似乎没有工作。初始高度和宽度均为500px，因此比例为1：1，但新的iframe未按1：1的比例缩放;宽度和高度是不同的。 –

我想我根据你的建议找到了答案。我还没有用一些非方块测试它，但我将“min-width”和“min-height”都改为“width”和“height”，并将iframe-wrapper改为“width：100％ “和”填充：100％0 0“//编辑：不，这总是导致方形iframe，我的坏。 –

在保持高宽宽高比的同时伸展内嵌框架以适应宽度（tumblr主题）

回答

相关问题