Question

我试图让这个视频缩小一半75％或者缩小50％（但在移动视图中回到100％）。我不确定为什么，但为.video-container添加75％的宽度使它变小，但增加75％的高度什么都不做。大概是编辑子元素是不对的，因为这只需要父母大小的100％。

为什么这不能正确调整大小？

＆＃13;

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* OTHER IRRELEVANT STUFF BELOW */
#first-sec {
    background: lightblue;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 150px 10% 100px 10%;
    box-sizing: border-box;
}
h1 {
    font-size: 62px;
    text-transform: uppercase;
    font-weight: 400;
}
p {
    font-size: 22px;
    font-weight: 300;
    padding-top: 10px;
}
a.cta-button {
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
    border: 1px solid #333;
    cursor: pointer;
    background: orange;
    font-size: 22px;
    font-weight: 300;
    color: #333;
    text-decoration: none;
    margin: 0;
    display: inline-block;
}

＆＃13;

<section id="first-sec">
  <h1>header 1 here</h1>
    <p>paragraph 1 here.</p>
    <article class="video-container">
        <iframe width="100%" height="auto" src="https://www.youtube.com/embed/-YXf0-_WMTU?rel=0" frameborder="0" allowfullscreen class="video"></iframe>
    </article>
    <p>paragraph 2 here:</p>
    <a class="cta-button" href="#">button</a>
    </section>

＆＃13;

Answer 1

我不确定为什么但是为.video-container添加75％的宽度会使它变小但是增加75％的高度什么都不做。

因为这种方法背后的技巧是根本没有高度，并且元素被填充代替 - 这使得“尊重宽高比”首先在这里起作用，使用宽度＆安培;高度只有你无法实现。

如果更改.video-container的宽度，它将无效，因为填充百分比基于包含块的宽度 - 这意味着，您需要插入一个额外的容器元素：

＆＃13;

.video-container {
  width: 50%;
}
.video-container-inner {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* OTHER IRRELEVANT STUFF BELOW */
#first-sec {
    background: lightblue;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 150px 10% 100px 10%;
    box-sizing: border-box;
}
h1 {
    font-size: 62px;
    text-transform: uppercase;
    font-weight: 400;
}
p {
    font-size: 22px;
    font-weight: 300;
    padding-top: 10px;
}
a.cta-button {
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
    border: 1px solid #333;
    cursor: pointer;
    background: orange;
    font-size: 22px;
    font-weight: 300;
    color: #333;
    text-decoration: none;
    margin: 0;
    display: inline-block;
}

＆＃13;

<section id="first-sec">
  <h1>header 1 here</h1>
    <p>paragraph 1 here.</p>
    <article class="video-container">
      <div class="video-container-inner">
        <iframe width="100%" height="auto" src="https://www.youtube.com/embed/-YXf0-_WMTU?rel=0" frameborder="0" allowfullscreen class="video"></iframe>
      </div>
    </article>
    <p>paragraph 2 here:</p>
    <a class="cta-button" href="#">button</a>
    </section>

＆＃13;

调整视频容器的大小

1 个答案: