Question

我有一个iframe，我想保持宽高比为16：9（高度/宽度），现在iframe下方有一个框，我不希望iframe重叠。所以我不能使用padding bottom技巧，因为它会导致视频与盒子重叠。如何获得iframe在剩余空间中可以达到的最大宽度和高度？

例如，假设我有一个1200px乘600px的窗口，50px用于一个盒子。我希望iframe在剩余的1200px到550px上获取最大宽度和高度，并且仍然保持其宽高比，并且永远不会低于页面底部的框。我怎么能用jquery做到这一点？此外，当窗口调整大小时，iframe应保持其宽高比

我要求嵌入视频用于在iframe中保持宽高比的公式。当我嵌入一个包含视频的iframe时，视频会通过在其周围添加黑框来保持其宽高比。

这是HTML：

<div class="iframe-container">
    <iframe></iframe>
</div>
<div class="box"></div>

Answer 1

如果您知道预期的宽高比，这非常简单，可以使用CSS完成。对于16：9（56.5％）的视频嵌入，它就是这样完成的。

您可以像对待任何其他元素一样将max-height和max-width属性添加到容器中。高度为0，根据您想要的宽高比简单设置填充。 iframe设置为填充容器宽度和高度，以便它符合基于填充的宽高比。

.iframe-container {
    position: relative;
    padding-bottom: 56.5%;
    height: 0;    
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

更新：您可以使用vw单位做得更好。

如果您的iframe是浏览器的整个宽度，这将有效。否则你可以对它进行一些计算。但是，对于要保持宽高比的全宽iframe，它如下（对于16：9宽高比）：

iframe {
    width: 100vw;
    height: 56.5vw;
}

Answer 2

随着时间的推移，使用一些条件数学来维持宽高比非常简单。

一般来说，我们有一个容器，一个包含的东西，一个已知的比例（16/9）。可以通过捕获容器中的东西（检查越界）并从比率计算另一个值来确定高度或宽度。

更新：获得新值后，请检查是否有界限。在这种情况下，最小高度和最大宽度。

有点像：

 // if the iframe height (container width / ratio) is greater than the container height
 if ( (cW / RATIO) > cH){

    h = cH;             // set the height equal to the container
    w = cH * RATIO;     // set the width equal to the container height * ratio
 } else {

    w = cW;             // set the width equal to the container
    h = cW / RATIO;     // set the height equal to the container width / ratio
 }

 // Ok so, now that the iframe is scaled up, check for out of bounds
 if ( iH < MIN_HEIGHT ){

   iH = MIN_HEIGHT;     // set the height to the const
   iW = iH * RATIO;     // use the same basic formula, but use the new value
 }

 if (iW > MAX_WIDTH){

   iW = MAX_WIDTH;      // set the width to the const
   iH = iW / RATIO;     // same formula, new value
 }

- Working fiddle进行了一些讨论 - Updated fiddle有一些越界检查。

显然，你可以在计算中加入一些额外的数学运算，为控制条或其他任何东西腾出空间。这只是一个基本原则，处于一个非常简单的状态。我几乎总是对最大宽度进行一些额外的检查，或做一些定位或其他什么。但这应该是一个好的开始。

干杯 -

维持iframe的宽高比

2 个答案: