Question

我有一个40％全屏的盒子图片，在这个盒子下面我有一个youtube视频（iframe），但是我无法对齐响应（高度）

我无法在图像类中插入视频，因为该类具有单独的函数ajax

然后如何对齐两个类的宽度的40％？

这是一个我用过它的代码对宽度有好处但不明白因为高度大而不尊重youtube格式：

<div class="video44"><iframe width="560" height="315" src="https://www.youtube.com/embed/mZXkhXcZ3AQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>

这是一个css：

.video44 { width: 40%; 
    font-family: 'Raleway_Medium';
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
}

.video44  { 
    width: 40%;
    height: auto; 
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;    
}
.video44  iframe{
    left:0;
    top:0;
    height: 100%;
    width:100%;
    position:absolute;
}

这是一个结果，为什么它的高度为＆＃39;大??

http://s22.postimg.org/5ayakawch/tst_Kid.png

Answer 1

如果你只想要编译的答案，请点击这里：

.video44 iframe{width: 40vw;height:calc((315/560)*40vw);height:-moz-calc((560/315)*40vw);}

<强>说明

您的HTML：

<div class="video44"><iframe width="560" height="315" src="https://www.youtube.com/embed/mZXkhXcZ3AQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>

说width="560" height="315"。因此，当您设置width: 40%时，它将占据屏幕的40％，对吗？但正如您在HTML中看到的那样，youtube格式并不存在，它们只有width="560" height="315"。

因为这里＆＃34;％＆＃34;正在被用作文档宽度的百分比，可能更容易更改为＆＃34; vw＆＃34;。现在视频将是40vw。

此外，如果我们使用calc()，我们可能会找到此视频的未指定比例。

所以我们现在宽度与高度的差异和比例是宽度/高度，因此我们将使用calc(315 / 560)。然后我们将其乘以我们想要的大小，在本例中为40vw。就是这样！它看起来怎么样？

.video44 iframe {
  width: 40vw;
  height: calc((315 / 560) * 40vw);
  height: -moz-calc((560 / 315) * 40vw);
}

您还需要添加-moz-，因为Mozilla并不完全支持它。

.video44发生了什么事？它会自动调整，因为它是<div>。

这应该有用。

<强>更新 要回答问题＆＃34;如何在div内部制作视频，该视频位于不是div的100％正文的容器内，div 40％提到的容器＆＃34;，这里是答案：

HTML：

<div id="big_container">
    <div class="video44">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/mZXkhXcZ3AQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS：

#big_container {
  width: 100%;
  height: 25em;
  background-color: red;
}

.video44 {
  width: 40%;
  height: calc(560px / 315 * 100);
  background-color: blue;
}

iframe {
  width: 100%;
  height: 100%;
}

#big_container代表你的更大容器。我还添加了颜色，以便你可以玩它。

顺便说一句，如果你正在尝试＆＃34; alliniate＆＃34;它，然后我重新使用<section> s，然后用它制作列。

用youtube垂直对齐两个类

1 个答案: