主页 / 问题 / 1079358
Accepted
Бармалей
Asked:2020-02-07 03:45:48 +0000 UTC2020-02-07 03:45:48 +0000 UTC

为什么视频会忽略父母的容器大小？

  • 772

为什么视频不遵守父容器的尺寸？

HTML

<div class="video">
  <video autoplay muted>
    <source src="img/deep.mp4">
  </video>
</div>

css

.video{
  width: 450px;
  height: 250px;
  margin: 20px auto;
}
video{
  width: 100%;
  height: 100%;
}

截屏

html

1 个回答

  1. Best Answer

    不忽视，服从：

    .video{
  width: 450px;
  height: 250px;
  margin: 20px auto;
}
video{
  width: 100%;
  height: 100%;
}
    <div class="video">
  
  <video autoplay muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  </video>
</div>

    您还可以使用object-fit caniuse控制块中视频的填充：

    .video {
  width: 450px;
  height: 450px;
  margin: 20px auto;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    <div class="video">

  <video autoplay muted>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      </video>
</div>

    • 3

相关问题