在Angular中如何限制视频最大高度不超过用户屏幕高度

你写的max-height: 90vh逻辑本身是成立的，未生效通常是以下几个场景的问题，对应修复方案如下：

1. 修复父元素约束问题 #

绝大多数场景下失效是因为video的父容器没有设置高度限制，或者父元素默认开启了overflow: visible，导致子元素的max-height规则不生效。你需要先给video所有上级容器补充高度约束，比如如果video放在组件根节点下，先给组件宿主添加样式：

:host {
  display: block;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

再调整video标签样式，增加宽高比适配规则：

<video style="width: 100%; height: auto; max-height: 90vh; object-fit: contain;" #myVideoId autoplay></video>

新增的object-fit: contain会保证视频按原比例缩放，不会出现拉伸变形的问题。

2. 解决移动端vh兼容性问题 #

移动端浏览器的vh单位会随地址栏、底部操作栏的显示隐藏动态变化，导致90vh计算值和实际可用屏幕高度不符，可以用Angular的事件监听动态计算高度规避该问题：

import { Component, HostListener, ElementRef, ViewChild } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent {
  @ViewChild('myVideoId') videoEl!: ElementRef<HTMLVideoElement>;

  @HostListener('window:resize')
  adjustVideoHeight() {
    const availableHeight = window.innerHeight;
    this.videoEl.nativeElement.style.maxHeight = `${availableHeight * 0.9}px`;
  }

  ngAfterViewInit() {
    this.adjustVideoHeight();
  }
}

该方案直接读取当前窗口实际可用高度计算，兼容性远优于vh单位，适配所有设备场景。

3. 排查样式优先级覆盖问题 #

如果你的组件使用了默认的视图封装模式，检查是否有全局样式给video标签设置了更高优先级的height属性，可以临时给当前video的max-height规则加!important快速验证是否为优先级问题，确认后再调整全局样式或者给当前video增加专属类名提升优先级即可。

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