如何使页面底部的图片与视频保持相同尺寸？

我已为图片和视频设置了相同的class，但它们的高度仍不一致，不清楚原因，恳请协助解决。

• 默认样式差异：浏览器对<img>和<video>元素有不同的默认样式，比如默认的内外边距、display属性等。可以在class中显式重置这些样式：

  .target-class {
    margin: 0;
    padding: 0;
    display: block;
  }
  

• 原始宽高比不同：图片和视频本身的宽高比存在差异时，即使设置了相同高度，若未做自适应约束，视觉上会出现高度不一致。可以强制统一宽高比：

  .target-class {
    aspect-ratio: 16/9; /* 根据实际需求调整比例 */
    width: 100%;
    height: auto;
    object-fit: cover; /* 保证内容填充容器，避免拉伸变形 */
  }
  

• 视频控件占用高度：视频默认显示的控件栏会额外增加元素总高度。可以隐藏控件或调整其样式：

  .target-class video {
    controls: none; /* 隐藏控件 */
  }
  

• 盒模型计算偏差：若未设置box-sizing: border-box，元素的边框、内边距会额外计入总高度。统一设置盒模型规则：

  .target-class {
    box-sizing: border-box;
  }
  

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