Tính toán kích thước với tỷ lệ khung hình cố định
Tỷ lệ hiện tại
16:9
(1.7778)
Công cụ Aspect Ratio Lock của Tấn Phát Digital giúp bạn tính toán kích thước với tỷ lệ khung hình cố định. Khóa tỷ lệ khi resize - thay đổi width tự động tính height và ngược lại. 8 preset tỷ lệ phổ biến: 1:1 (Square), 4:3 (Standard), 16:9 (Widescreen), 21:9 (Ultrawide), 9:16 (Portrait), 3:2 (Photo), 2:3 (Portrait Photo), 4:5 (Instagram). Tự động tính và hiển thị ratio ở dạng đơn giản nhất (GCD). Export CSS aspect-ratio property. Preview trực quan với box tỷ lệ. Công cụ hoàn toàn miễn phí.
Aspect ratio (tỷ lệ khung hình) là mối quan hệ giữa width và height của một element. Khóa tỷ lệ đảm bảo hình ảnh, video, và containers không bị méo (distorted) khi resize. Trong responsive design, maintaining aspect ratio quan trọng cho: Images và thumbnails - tránh stretched hoặc squished images. Video embeds - YouTube, Vimeo cần đúng 16:9 để không có black bars. Card layouts - consistent card sizes trong grids. Hero sections - maintain proportions across screen sizes. Social media images - mỗi platform có preferred ratios (Instagram 1:1, 4:5; Facebook 1.91:1; Pinterest 2:3). CSS aspect-ratio property mới giúp maintain ratios mà không cần padding hack.
1:1 (Square): Instagram posts, profile pictures, app icons. 4:3 (Standard): Traditional TV, iPad, nhiều cameras. 16:9 (Widescreen): YouTube, modern TVs, presentations, desktop wallpapers. 21:9 (Ultrawide): Cinema, ultrawide monitors. 9:16 (Portrait): Instagram Stories, TikTok, Reels, mobile-first content. 3:2 (Photo): DSLR photos, 35mm film, classic photography. 2:3 (Portrait Photo): Portrait orientation của 3:2. 4:5 (Instagram Portrait): Instagram portrait posts, tối ưu cho mobile feed. 1.91:1: Facebook link previews, Twitter cards.
CSS aspect-ratio là property mới cho phép set tỷ lệ khung hình trực tiếp, thay thế padding hack cũ. Syntax: aspect-ratio: 16 / 9; hoặc aspect-ratio: 1.777;. Browser support: Chrome 88+, Firefox 89+, Safari 15+, Edge 88+. Với aspect-ratio, element sẽ maintain ratio khi width thay đổi. Kết hợp với width: 100%; max-width: 800px; để tạo responsive containers với fixed ratio. Fallback cho older browsers: dùng padding-top percentage trick hoặc @supports query.
Aspect ratio thường được biểu diễn ở dạng đơn giản nhất bằng cách chia cả width và height cho GCD (Greatest Common Divisor - Ước chung lớn nhất). Ví dụ: 1920×1080 → GCD = 120 → 1920/120 : 1080/120 = 16:9. 1200×800 → GCD = 400 → 3:2. Công cụ này tự động tính GCD và hiển thị ratio ở dạng đơn giản nhất. Decimal ratio (như 1.777 cho 16:9) hữu ích khi cần tính toán chính xác hoặc dùng trong code.
aspect-ratio: 16 / 9; set preferred aspect ratio cho element. Khi chỉ có width (hoặc height), browser tự động tính dimension còn lại. Nếu cả width và height được set explicitly, aspect-ratio bị ignore. Property này thay thế padding-top hack cũ và được support tốt trong modern browsers.
Với CSS: img { width: 100%; height: auto; } để maintain original ratio. Hoặc dùng object-fit: cover; với fixed dimensions để crop và fill. Với aspect-ratio: img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } để force specific ratio với cropping.
Instagram: 1:1 (feed square), 4:5 (feed portrait - recommended), 9:16 (Stories/Reels). Facebook: 1.91:1 (link previews), 1:1 hoặc 4:5 (feed). Twitter: 16:9 (landscape), 1:1 (square). Pinterest: 2:3 (optimal), 1:1. YouTube: 16:9 (standard), 9:16 (Shorts). TikTok: 9:16.
Padding-top hack: padding-top percentage relative to width, nên padding-top: 56.25% (9/16*100) tạo 16:9 container. Nhược điểm: cần wrapper element, content phải absolute positioned, không intuitive. aspect-ratio property đơn giản hơn, không cần wrapper, content flow bình thường.
Luôn maintain aspect ratio khi resize. Nếu cần specific dimensions với different ratio, dùng cropping thay vì stretching. Trong CSS: object-fit: cover; crop để fill, object-fit: contain; fit trong bounds với letterboxing. Công cụ này giúp tính dimensions đúng ratio trước khi resize.
Gần như giống nhau. 16/9 = 1.777... (repeating). 1.77:1 là approximation. Trong thực tế, sự khác biệt không đáng kể. Tuy nhiên, khi cần chính xác (như video production), nên dùng 16:9 hoặc 1.7778 (4 decimal places) thay vì 1.77.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
