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

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

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

HTML

---

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

/*span*/.iframe包装器{ 宽度：50%； 身高：0； 填充：40%0； 显示：块； 位置：相对位置； 边框：5px纯蓝色； } /*span*/.iframe包装器iframe{ 位置：绝对位置； 排名：0； 右：0； 底部：0； 左：0； 最大宽度：100%； 最大高度：100%； }

---

这是正确的比例，但它不是文章的完整长度；一半，我想从宽度上看：50%。我现在如何将其扩展到100%，仍然保持该比率？而且，这似乎不起作用。初始高度和宽度均为500px，因此比例为1:1，但新iframe未按1:1比例缩放；宽度和高度不同。我想我根据你的建议找到了答案。我仍然需要用一些非方形块来测试它，但是我将最小宽度和最小高度都更改为宽度和高度，将iframe包装器更改为宽度：100%，填充：100%0//EDIT:Nope，这总是会导致方形iframe，我的错。是的，你需要调整宽度/填充量以匹配你想要的纵横比。如果你想要1:1，你可以做宽度：100%；填充：100%0哦，问题是，我不知道iframe的比率；每个iframe都是不同的。我希望在不知道这个比例的情况下，能找到一种方法来保持这个比例。

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

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