为何class为sizer的div容器无法调整video尺寸？求助解决

问题根源 #

1. video是替换元素，自带基于视频原分辨率的固有尺寸，默认不会自动适配父容器宽度
2. 你给video添加的:before/:after伪元素完全无效——替换元素不支持伪元素，这部分代码可以直接删掉
3. 直接给video设置position: relative配合偏移，会让它的布局逻辑脱离父容器的部分约束，但不是尺寸失效的核心原因

修正后的代码 #

CSS

/* Vid*/
.sizer {
  width: 100px;
  /* 可选：如果需要固定高度，可添加，建议优先用width控制比例 */
  /* height: 56px; */
}

.sizer video {
  /* 核心：让video完全填充父容器宽度 */
  width: 100%;
  /* 保持视频比例不变形 */
  height: auto;
  /* 如果你确实需要这个位置偏移，保留即可；建议把定位移到.sizer上更合理 */
  position: relative;
  top: 1400px;
  right: -100px;
}

/* 已移除无效的video伪元素代码 */

HTML（无需修改）

<div class="sizer">
<video src="vid1.mp4" autoplay controls></video>
</div>

补充说明 #

• width: 100%会让video继承父容器.sizer的宽度，height: auto会自动计算对应高度，保证视频比例正常
• 如果要调整视频的整体位置，建议把position: relative和偏移属性加到.sizer上，这样容器和内容的布局逻辑更统一，避免video脱离容器的尺寸约束

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