Giữ tỷ lệ khi resize ảnh｜5 mẹo tránh méo mặt, logo và OGP【2026】
Giữ tỷ lệ = một cạnh + khóa aspect, không ép cả hai số. Mặt người / logo / chai sản phẩm méo gần như luôn đến từ việc nhập cứng width và height khác tỷ lệ gốc. Thu nhỏ từ master đủ lớn; đừng upscale. CSS object-fit xử lý khung hiển thị — không thay bước resize file. Làm nhanh trên thay đổi kích thước ảnh (local, không đăng ký).
Freelancer nhận PNG từ điện thoại khách (3000×4000, tỷ lệ 3:4), brief bảo «làm OGP 1200×630». Hai phút sau ảnh đã «đúng số» — và khuôn mặt bị dẹt. Khách không đọc EXIF; họ thấy làm ẩu.
Bài này tập trung mẹo giữ tỷ lệ khi resize — các thao tác sai hay gặp, checklist số, và cách phân biệt méo do file với méo do CSS. (Chiến lược letterbox vs crop cho landing SME đã có bài riêng; ở đây đi sâu vào thói quen resize an toàn.)
Bài viết này giúp bạn
- Hiểu vì sao «đúng pixel» vẫn có thể méo
- 5 mẹo khóa tỷ lệ khi đổi kích thước file
- Bảng lỗi thường gặp + cách sửa
- Phân biệt resize file vs
object-fit - Checklist trước khi gửi khách / upload SNS
Tỷ lệ bị phá khi nào?
Aspect ratio = rộng ÷ cao. Ảnh 1920×1080 ≈ 16:9. Nếu xuất thành 1200×1200 mà kéo (stretch) thay vì crop, tỷ lệ đổi → nội dung méo.
Hai nguồn méo khác nhau:
| Nguồn | Dấu hiệu | Cách xử lý |
|---|---|---|
| File bị stretch | Tải về máy vẫn méo | Resize lại với lock tỷ lệ / crop đúng |
| CSS ép khung | File gốc đẹp, trên site méo | Sửa width/height/object-fit |
Nhiều ticket «ảnh méo» thực ra là CSS. Trước khi resize lại lần 3, mở DevTools xem ảnh có bị gán height: 200px trên ảnh 16:9 không.
5 mẹo giữ tỷ lệ khi resize
1. Chỉ nhập một cạnh
Quy tắc vàng: biết chiều rộng đích → nhập width, để height auto (hoặc ngược lại). Tool tính cạnh còn lại theo tỷ lệ gốc.
Ví dụ: ảnh 3000×2000 (3:2), cần rộng hiển thị ~800 CSS px (retina ~1600):
- Đúng: width
1600+ giữ tỷ lệ → height ≈1067 - Sai: width
1600, height900(ép về 16:9) → stretch nếu không crop trước
2. Luôn bật «Giữ nguyên tỷ lệ»
Trên Image resize Kawa, checkbox Giữ nguyên tỷ lệ khóa quan hệ hai cạnh. Tắt lock rồi gõ cả hai số = tự nguyện méo. Thói quen: bật lock → đổi một ô → xem preview → tải xuống.
📐 Thay đổi kích thước ảnh ngay tại đây
Công cụ đề xuấtNén ảnhMuốn giảm kích thước file cùng lúc?Dùng thử ngay →Thả ảnh vào đây hoặc nhấp để chọn
Xem trước
3. Thu nhỏ, không phóng to
| Tình huống | Nên làm | Tránh |
|---|---|---|
| Master 4000px → slot 800px | Resize xuống ~1600px rồi WebP | Upload 4000px «cho chắc» |
| Master 400px → slot 1200px | Xin ảnh lớn hơn / đổi asset | Upscale 3× rồi blur nhẹ «cho mịn» |
Upscale không tạo chi tiết mới. WebP cũng không cứu được pixel thiếu.
4. SNS / OGP: khớp tỷ lệ trước, khớp số sau
Kích thước phổ biến (tham khảo, kiểm tra docs nền tảng trước khi ship):
| Mục đích | Tỷ lệ gần đúng | Lưu ý resize |
|---|---|---|
| OGP / link preview | ~1.91:1 (vd 1200×630) | Ảnh dọc phải crop hoặc letterbox — không stretch |
| Avatar / logo vuông | 1:1 | Crop vùng quan trọng rồi resize cạnh đều |
| Story / short dọc | 9:16 | Master ngang 16:9 không kéo thành dọc |
| Thumb sản phẩm grid | 1:1 hoặc 4:5 | Cùng một quy tắc cho cả catalog |
«Giữ tỷ lệ» giữ tỷ lệ gốc. Nó không biến 3:4 thành 1.91:1. Muốn OGP đúng khung → crop (hoặc nền letterbox) trước, rồi mới resize một cạnh.
5. Preview trên nền có contrast
Méo nhẹ khó thấy trên canvas trắng. Đặt preview cạnh ảnh gốc, hoặc trên nền xám. Logo chữ mỏng và mặt người là «cảm biến méo» tốt nhất — nếu chúng ổn, phần còn lại thường ổn.
CSS: khi nào dùng object-fit
Resize file giảm byte và độ phân giải decode. CSS quyết định ảnh nằm trong khung thế nào:
.card-thumb {
width: 320px;
height: 200px; /* khung 8:5 — có thể khác tỷ lệ file */
object-fit: cover; /* đầy khung, cắt thừa — không stretch */
object-position: center top; /* giữ mặt / sản phẩm */
}cover— đầy khung, cắt phần thừa (hero, thumb đồng đều)contain— toàn ảnh trong khung, có thể letterbox (screenshot UI, biểu đồ)- Không ghi
object-fitmà ép cảwidthvàheightkhác tỷ lệ → stretch
object-fit không làm file nhẹ hơn. Vẫn cần resize về ~1×–2× chiều rộng hiển thị trước khi nén.
Case study ngắn
A. Banner Zalo / Facebook từ ảnh studio dọc
Designer gửi 2400×3600 (2:3). Slot banner ngang ~1200×628.
- Crop vùng sản phẩm + khoảng thở ngang trên master (xuất tạm ~1884×986 ≈ 1.91:1)
- Resize với lock tỷ lệ xuống 1200×(auto) ≈ 628
- Kiểm tra chữ logo không sát mép crop
- Mới encode WebP
Bỏ bước 1 → nhập 1200 và 628 trực tiếp = stretch.
B. Catalog Shopee: 50 SKU cùng tỷ lệ
Thống nhất: cạnh dài tối đa 1200px + giữ tỷ lệ. Chạy từng ảnh (hoặc batch nếu tool hỗ trợ) với cùng một quy tắc. Spot-check 3 SKU có mặt người / chai đứng trước khi làm cả kho — một ảnh méo lọt qua sẽ bị khách screenshot gửi lại.
Checklist trước khi upload
- Lock tỷ lệ / chỉ một cạnh có số
- Preview không dẹt mặt, không oval logo
- Không upscale từ ảnh nhỏ hơn slot
- Kích thước file ≈ 1–2× CSS width (retina)
- OGP/SNS: tỷ lệ khớp slot (crop nếu cần) trước khi «đúng số px»
- Trên site: kiểm tra
object-fitnếu khung cố định - Ảnh nhạy cảm xử lý local — tool resize Kawa không bắt upload server lạ
Lỗi hay gặp
| Lỗi | Nguyên nhân | Sửa |
|---|---|---|
| Mặt dẹt sau «đúng 1200×630» | Stretch 2 cạnh | Crop đúng tỷ lệ OGP rồi resize 1 cạnh |
| Site méo, file tải về đẹp | CSS thiếu object-fit | cover/contain + bỏ height ép sai |
| Ảnh mờ dù «đã resize» | Upscale hoặc quality quá thấp sau resize | Xin master lớn; resize xuống rồi mới nén |
| Logo oval trên avatar | Ép ảnh ngang vào khung 1:1 | Crop vuông lấy vùng logo trước |
Cách dùng nhanh trên Kawa
- Mở thay đổi kích thước ảnh
- Thả JPEG/PNG/GIF/WebP
- Bật Giữ nguyên tỷ lệ
- Nhập một cạnh → Thay đổi kích thước → xem preview → Tải xuống
Không cần tài khoản. Phù hợp chỉnh trước khi gửi khách hoặc đưa vào CMS.