yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

解决布局跳动问题

Browse Source
This commit is contained in:
zhcnyuyang 2025-08-21 16:39:00 +08:00
parent 1ce63eaf10
commit b4869ac005
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/publicstyle.scss
View File

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