diff --git a/src/publicstyle.scss b/src/publicstyle.scss index 062498f..f39d2b2 100644 --- a/src/publicstyle.scss +++ b/src/publicstyle.scss @@ -41,7 +41,7 @@ z-index: 0; overflow: hidden; - // 默认状态:视频未加载时使用固定aspect-ratio + // 始终保持固定的aspect-ratio作为占位,确保立即渲染 @include media-breakpoint-between(xs, md) { aspect-ratio: 1.92; } @@ -49,23 +49,27 @@ aspect-ratio: 2.62026969; } - // 视频元素默认样式 - video { + // 视频/图片元素的默认样式 + video, .videoimg { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } - // 当视频加载完成后,切换为自适应高度模式 + // 当媒体加载完成后,重新调整容器和媒体尺寸 &.video-loaded { aspect-ratio: unset; // 移除固定比例 height: auto; // 高度自适应 - video { + video, .videoimg { + position: static; // 改为文档流布局 width: 100%; // 宽度占满 height: auto; // 高度自适应 - object-fit: contain; // 保持视频比例,完整显示 + object-fit: contain; // 保持媒体比例,完整显示 } } }