16:9 Aspect Ratio - Width, Height & CSS Dimensions

16:9 expresses width-to-height as 16:9. Widescreen HD video, YouTube, and modern displays. In CSS, write aspect-ratio: 16 / 9. The decimal width÷height value is approximately 1.7778. Lock either side in the calculator to keep that proportion when you resize frames, posters, or video embeds for this format.

Multiply width by 9/16: 1920 x (9 ÷ 16) = 1080px. Enter 1920 in the width field with ratio locked to 16:9 and the tool returns 1080px automatically. Change width anytime to regenerate height without breaking the ratio or introducing letterboxing.

Common 16:9 resolutions include 1280x720 (HD), 1920x1080 (Full HD), 2560x1440 (QHD), and 3840x2160 (4K UHD). All share the same ratio with different pixel counts, so pick the size that matches your delivery bitrate and display target.

Use aspect-ratio: 16 / 9 on a block container. Pair it with width: 100% or a fixed max-width; the browser computes height. For embedded video, wrap the iframe in a 16:9 box to prevent cumulative layout shift while the media loads. Copy the sample dimensions above when you need a concrete pixel fallback.

Ratio-specific pages document common resolutions and use cases for 16:9 without hunting presets. The embedded calculator is pre-loaded with 16:9 so you skip manual ratio entry - helpful when sharing links with teammates or clients who always work in this format for ads, video, or social crops.

The main Aspect Ratio Calculator supports any custom ratio, simplified GCD output, and all presets. Visit /dev-tools/aspect-ratio-calculator/ for the complete tool with methodology, cross-links to other Dev Tools, and free-form width or height entry when your project is not locked to a named preset.