Question

使用Free Code Camp进行项目时，我不知道如何正确调整视频大小以适合网格列/行。我也不明白为什么页面底部有空白。任何帮助是极大的赞赏！

这是我的codepen：https://codepen.io/andrewcauthorn/pen/aMYbJr

`

#image {
  width: 100%;
  max-width: 625px; 
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

main {
  background-color: black;
}

.container {
  color: white;
}

  .container {
    font-size:;
    width: 100%;
    background: ;
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    margin-left: auto;
    margin-right: auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    overflow: hidden;
  } 

#all {
  border: solid #552583;
  color: #FDB927;
}

h1 {
  color: #FDB927;
  text-align: center
} 

.d1 {
  position: relative;
  padding-bottom: 56.25%;

}

.d1 iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  object-fit: cover;
}

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
  </head>
  <title id="title">The Black Mamba: Win Over Anything</title>
  <main id="main">
    <h1>The Black Mamba: The Legacy </h1>
    <div id="img-div">
        <figure>
            <img src="http://game7network.com/wp-content/uploads/137_1atiba_jefferson_kobe_bryant_3.jpg" id="image" alt="blah blah blah">
                <figcaption id="img-caption">
                  I am Kobe
                </figcaption>   
        </figure>
    </div>
<a href="https://ftw.usatoday.com/2015/12/kobe-bryant-stats-record-most-games-20-years-most-missed-shots-81-points-stats-michael-jordan-lakers" target="_blank">What's up</a>
    <article id="tribute-info">

 <div class="container">
  <div class="d1" id="all">20 time all-star</div>
  <div class="d2" id="all"><iframe width="560" height="315" src="https://www.youtube.com/embed/Lf4biDUfwug" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class="d3" id="all">3</div>
  <div class="d4" id="all">4</div>
  <div class="d5" id="all">5</div>
</div>

    </article>              

  </main>
    <!-- page contents -->
  </body>
</html>

`

Answer 1

要修复空白，您只需删除浏览器添加到您的body标签的默认边距。您可以通过将其添加到CSS中来实现：

body {
    margin: 0px;
}

要调整视频的大小，您想将当前的<iframe>高度和宽度值替换为其父级的100％。

<iframe width='100%' height="100%" src="https://www.youtube.com/embed/Lf4biDUfwug" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS网格-如何在网格中调整视频大小？

1 个答案: