xuejianwu/yingxiangli-duanju
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fit generated videos to any aspect ratio

Browse Source
This commit is contained in:
xuejianwu
2026-07-30 09:52:39 +08:00
parent e111833df6
commit f9869601a3
3 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/styles.css
View File

@@ -221,7 +221,8 @@ hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0 0; }
.generation { margin-top: 22px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #fafbfe; }
.video-stage { aspect-ratio: 16 / 8; max-height: 430px; background: #111827; border-radius: 11px; overflow: hidden; display: grid; place-items: center; color: white; }
.video-stage video { width: 100%; height: 100%; object-fit: contain; }
.video-stage.has-video { aspect-ratio: auto; min-height: 320px; max-height: none; padding: 12px; }
.video-stage.has-video video { display: block; width: auto; max-width: 100%; height: auto; max-height: min(72vh, 760px); margin: auto; object-fit: contain; background: #111827; }
.generation-error { max-width: 620px; padding: 24px; text-align: center; }
.generation-error strong { display: block; color: #ffb8bd; font-size: 18px; }
.generation-error p { margin: 10px 0 0; color: #d7deed; font-size: 13px; line-height: 1.65; }
@@ -241,7 +242,7 @@ hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0 0; }
.version-card { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfe; }
.version-card.selected { border-color: var(--green); background: var(--green-soft); }
.version-preview { width: 116px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #111827; color: #d6dceb; font-size: 10px; }
.version-preview video { width: 100%; height: 100%; object-fit: cover; }
.version-preview video { width: 100%; height: 100%; object-fit: contain; background: #111827; }
.version-copy { min-width: 0; display: grid; gap: 4px; }
.version-copy strong { font-size: 13px; }
.version-copy span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }