Tỷ lệ khung hình video & CSS｜Tính 16:9, 9:16, 1:1 trước khi crop【2026】

Bạn vừa export master 1920×1080, kéo vào CapCut / VN / Premiere để cắt Shorts — timeline báo “1080p”, nhưng mặt người bị cắt nửa trán. Vấn đề không phải độ phân giải; vấn đề là tỷ lệ khung hình (rộng ÷ cao) khác nhau giữa kênh. Nền tảng sẽ letterbox hoặc center-crop im lặng nếu file không khớp tỷ lệ đích.

Bài này dành cho developer / freelancer / team marketing làm landing page và short video ở Việt Nam: tính 16:9 / 9:16 / 1:1 đúng pixel trước khi crop, khớp CSS hero với file export, và tránh lỗi batch khi “scale cho vừa”.

Bài viết này giúp bạn

• Hiểu aspect ratio ≠ độ phân giải (cùng 16:9 có thể 720p hoặc 4K)
• Bảng tỷ lệ phổ biến + size pixel hay dùng
• Công thức tính một cạnh khi biết cạnh kia
• CSS aspect-ratio + object-fit cho hero landing
• Safe zone 9:16 (UI TikTok che cạnh)
• Pipeline export và checklist trước khi upload

---

Aspect ratio là gì (và không phải gì)

Tỷ lệ khung hình (aspect ratio) là quan hệ rộng : cao, viết dạng W:H (ví dụ 16:9). Nó không nói file “nét” thế nào — đó là việc của độ phân giải (1920×1080, 1080×1920…).

Khái niệm	Ý nghĩa	Ví dụ
Aspect ratio	Tỷ lệ cạnh	16:9, 9:16, 1:1
Resolution	Số pixel	1920×1080, 1080×1920
Object-fit	Cách media lấp CSS box	cover / contain

Hai file 1280×720 và 1920×1080 cùng 16:9. Một file 1080×1920 là 9:16 — cùng “1080” trên một cạnh nhưng hướng khung hoàn toàn khác. Nhầm “1080p = đủ cho mọi kênh” là nguồn crop mặt phổ biến nhất.

---

Bảng tỷ lệ hay dùng cho landing & short video

Với team outsourcing hoặc agency nhỏ: đặt tên preset theo kênh, không theo cảm giác “full HD”:

yt-landscape-1080   → 1920×1080   (16:9)
landing-hero-1280   → 1280×720    (16:9)
shorts-vertical     → 1080×1920   (9:16)
ig-feed-square      → 1080×1080   (1:1)
ig-feed-portrait    → 1080×1350   (4:5)

---

Công thức tính — chỉ cần nhớ hai dòng

Gọi tỷ lệ W:H (ví dụ 16:9 → W=16, H=9):

cao  = round(rộng × H / W)
rộng = round(cao  × W / H)

Ví dụ nhanh

Biết	Tỷ lệ	Tính	Kết quả
Rộng 1920	16:9	1920 × 9 / 16	Cao 1080
Cao 1080	16:9	1080 × 16 / 9	Rộng 1920
Rộng 1080	9:16	1080 × 16 / 9	Cao 1920
Rộng 1080	1:1	1080 × 1 / 1	Cao 1080
Rộng 1280	16:9	1280 × 9 / 16	Cao 720
Cao 1350	4:5	1350 × 4 / 5	Rộng 1080

Luôn làm tròn số nguyên trước ffmpeg, After Effects, CapCut export hoặc canvas. Nửa pixel → cạnh mềm hoặc cảnh báo encoder. Với video H.264, ưu tiên cả hai cạnh chẵn.

Khi batch 20–40 size (landing + OG + short + feed), đừng tính tay từng dòng — mở tính tỷ lệ khung hình Kawa: chọn preset 16:9 / 1:1 hoặc nhập tỷ lệ tùy chỉnh, khóa một cạnh, lấy cạnh còn lại. Tool chạy trên trình duyệt, không upload file lên server.

---

CSS trên landing: khớp với file export

Hero video/ảnh thường fail theo hai hướng: (1) layout nhảy khi media load (CLS), (2) CSS box một tỷ lệ nhưng asset tỷ lệ khác → zoom/crop lệch.

.hero-media {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
}

.hero-media > video,
.hero-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* hoặc contain */
  object-position: center 30%; /* giữ mặt / sản phẩm */
}

• aspect-ratio giữ chỗ trước khi poster/video về — tốt cho Core Web Vitals.
• Embed dọc trên mobile: aspect-ratio: 9 / 16 kèm max-height: 80vh để khung không kéo trang vô tận.
• Đổi tỷ lệ theo breakpoint chỉ khi bạn ship crop tương ứng:

.hero-media { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .hero-media { aspect-ratio: 4 / 5; } /* cần file 4:5 riêng */
}

Chỉ đổi CSS mà vẫn dùng file 16:9 = cover cắt sâu hơn vào vùng giữa — đúng với “stretch cho vừa” mà design không chấp nhận.

cover vs contain

object-fit	Hành vi	Phù hợp
cover	Lấp đầy, cắt thừa	Hero marketing, background
contain	Giữ toàn bộ, có letterbox	Player phim, demo UI không được cắt

---

Safe zone cho short video 9:16

UI TikTok / Reels / Shorts chiếm mép: nút like, caption, username, thanh tiến trình. Nội dung quan trọng nên nằm trong ~80% chiều cao giữa; tiêu đề tránh ~12% trên và ~20% dưới. Subtitle burn-in đẹp trong NLE vẫn có thể nằm dưới UI nền tảng.

Không lấy thumbnail từ master ngang rồi upscale crop giữa sang 9:16 nếu mặt người quan trọng — ảnh mềm trên OLED điện thoại. Quay hoặc edit trong tỷ lệ đích, hoặc crop có chủ đích từ master đủ lớn.

Case: một clip, hai kênh

Freelance làm landing SaaS + teaser TikTok:

1. Master ngang 1920×1080 cho YouTube embed và hero.
2. Master dọc 1080×1920 — cùng cảnh nhưng framing khác (để trống mép cho UI).
3. Poster OG / LinkedIn: thường 1.91:1 hoặc crop 1200×630 — tính riêng, đừng giả định = 16:9 hero.
4. CSS hero: aspect-ratio: 16 / 9 + poster đúng 16:9 → không CLS, không cắt logo.

---

Vì sao batch job / auto-reframe hay hỏng

Auto-reframe theo chuyển động, không theo safe zone thương hiệu. Pipeline ổn định hơn:

1. Khóa tỷ lệ chính theo từng kênh (không “một file cho tất cả”).
2. Tính pixel từ cạnh dài đã chốt (thường 1920 hoặc 1080).
3. Export master riêng — không stretch 16:9 → 9:16.
4. Mirror cùng số vào CSS và poster.
5. (Tuỳ team) reject upload trong CI nếu width/height ≠ cặp kỳ vọng.

Crop center từ ngang sang dọc (chỉ khi chấp nhận mất hai bên):

ffmpeg -i in.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" out.mp4

Nếu mặt nằm lệch trái/phải, lệnh trên vẫn cắt sai — khi đó phải crop thủ công hoặc quay lại theo 9:16.

---

Checklist trước khi crop / upload

• Đã chọn tỷ lệ đích (16:9 / 9:16 / 1:1 / 4:5), không chỉ “1080p”
• Đã tính cạnh còn lại bằng công thức hoặc tool aspect ratio
• Cả hai cạnh là số nguyên (ưu tiên chẵn với video)
• Có master riêng cho kênh dọc — không stretch
• CSS aspect-ratio khớp file; object-fit đúng ý design
• Short video: text/logo nằm trong safe zone
• Poster / OG size tính riêng nếu kênh social khác hero

---

Lỗi thường gặp

Triệu chứng	Nguyên nhân	Cách xử lý
Mặt bị cắt trên TikTok	Dùng file 16:9 cho feed 9:16	Export master 1080×1920
Hero nhảy layout khi load	Chưa set aspect-ratio / kích thước	Đặt aspect-ratio + width
Logo bị cắt trên mobile	cover + asset ngang trên box dọc	Ship crop 4:5 hoặc đổi object-position
Video encode lỗi / cạnh mềm	Số lẻ / nửa pixel	round + cạnh chẵn
“Scale cho vừa” làm méo	Stretch khác tỷ lệ	Giữ tỷ lệ; letterbox hoặc crop có chủ đích

---

Cách dùng nhanh trên Kawa Dev Tools

1. Mở tính tỷ lệ khung hình
2. Chọn preset (16:9, 4:3, 1:1, 21:9, 3:2) hoặc tỷ lệ tùy chỉnh
3. Nhập một cạnh (rộng hoặc cao)
4. Sao chép cạnh còn lại vào CapCut / Figma / CSS / ffmpeg

Không cần đăng ký; phù hợp khi ngồi quán cà phê chỉnh size landing trước khi gửi client duyệt.

---

FAQ ngắn trong bài

Chỉ cần một file 4K rồi crop mọi nơi?
4K giúp có dư pixel để crop, nhưng framing 16:9 và 9:16 vẫn khác. Nên có composition / export riêng nếu chủ thể sát mép.

padding-bottom % còn cần không?
Hầu hết dự án 2026 dùng aspect-ratio. Giữ hack cũ chỉ khi phải support trình duyệt rất cũ.

Liên quan image resize?
Aspect ratio quyết định tỷ lệ; resize ảnh đổi kích thước file khi đã biết cặp px. Hai bước tách biệt — tính tỷ lệ trước, resize sau.

---

Liên kết liên quan

• Tính tỷ lệ khung hình
• Resize ảnh
• Danh sách công cụ