如何使网格或弹性项目保持相同的长度，而内容不会溢出其容器或重叠？

Question

如何确保图像或视频保持其长度？

我是 HTML 和 CSS 新手，我正在尝试通过修改课程的源代码来制作 YouTube 克隆项目。 这是截图。但是，每次我使用课程源代码以外的图像时，它都会崩溃，我不明白为什么？

我尝试使用flex，但项目溢出了。

如何确保网格或弹性项目保持相同的长度，而内容不会溢出其容器？

HTML 代码::

<main>
      <section class="video-grid">
        <div class="video-preview">
          <div class="thumbnail-row">
            <img class="thumbnail" src="images/selmon-bhai.jpeg">
            <div class="video-time">14:20</div>
          </div>
          <div class="video-info-grid">
            <div class="channel-picture">
              <img class="profile-picture" src="images/hrithik.png">
            </div>
            <div class="video-info">
              <p class="video-title">
                Selmon Bhai ne mumbai me bacchi ko bachaaya. &#129402; &#129402;
              </p>
              <p class="video-author">
                Marques Brownlee
              </p>
              <p class="video-stats">
                3.4M views &#183; 6 months ago
              </p>
            </div>
          </div>
        </div>
----------This keeps going=--------------
</main>

CSS代码：

.thumbnail {
  width: 100%;
}

.video-title {
  margin-top: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 10px;
}

.video-info-grid {
  display: grid;
  grid-template-columns: 50px 1fr;
}

.profile-picture {
  width: 36px;
  border-radius: 50px;
}

.thumbnail-row {
  margin-bottom: 8px;
  position: relative;
  /* object-fit: cover; */
}

.thumbnail-row {
    object-fit: cover;
}

.video-author,
.video-stats {
  font-size: 12px;
  color: rgb(96, 96, 96);
}

.video-author {
  margin-bottom: 4px;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 40px;
}



@media (max-width: 750px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 751px) and (max-width: 999px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 400px) and (max-width: 600px){
    .video-grid {
      grid-template-columns: 1fr ;
    }
  }

.video-time {
  font-size: 12px;
  font-weight: 500;
  padding: 4px;
  border-radius: 2px;
  background-color: black;5
  color: white;
  position: absolute;
  bottom: 8px;
  right: 5px;
}

type here

Answer 1

将img宽度设置为容器的100%，并将容器设置为与其他容器相同的长度，由于img是一个正方形并且不像其他容器那样处于横向，因此您还需要调整其高度， 尝试这样的事情：

.缩略图{ 宽度：100%； 身高：50%； //请根据您的需要进行调整 }