实现视频背景上层图片裁剪至视频底部的方法

要实现图片底部被视频高度裁剪的效果，核心是把图片和视频放到同一个相对定位的容器里，利用容器的overflow:hidden来裁切超出部分，具体修改如下：

修改后的HTML结构 #

把图片容器嵌套进视频容器内部，让两者共享同一个父容器的边界：

<div class="videopad">
  <div class="ImageThatsTooBig">
    <img src="image-thats-too-big.png" width="50%" />
  </div>
  <video width="100%" height="auto" class="videov" autoplay muted loop>
    <source src="video-used-as-background.mp4" type="video/mp4" />
  </video>
</div>

修改后的CSS代码 #

.videopad {
  position: relative; /* 作为内部绝对定位元素的定位基准 */
  height: 700px; /* 和视频高度保持一致 */
  overflow: hidden; /* 裁切所有超出容器边界的内容 */
}

.videov {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ImageThatsTooBig {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%); /* 更简洁的水平居中实现 */
  z-index: 9;
  width: 50%; /* 和图片的宽度设置保持一致 */
}

.ImageThatsTooBig img {
  width: 100%; /* 确保图片占满容器宽度 */
  display: block; /* 消除图片默认的行内间距 */
}

关键说明 #

• 父容器.videopad的position:relative让内部绝对定位的图片以它为参考，overflow:hidden直接截断所有超出容器高度（700px）的图片部分。
• 视频设置height:100%，刚好撑满父容器高度，保证视频和容器边界完全对齐。
• 用transform: translateX(-50%)实现水平居中，比原来的margin方式更适配不同场景。

内容的提问来源于stack exchange，提问作者Eric Sayag