# Beste UI > Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade. Markdown rendition of https://ui.beste.co/tools/aspect-ratio. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`. Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json --- [tools](/tools)/[design](/tools/category/design) # Aspect ratio calculator Turn any width and height into a reduced ratio, a decimal and the Tailwind class, resize to a new width while keeping the shape, and copy the aspect-ratio rule that reserves the space before the image loads. Preset 16:94:33:21:121:99:16 WidthpxHeightpx Ratio16:9 Decimal1.778 Tailwindaspect-video Resize to widthpx Height at that width720px aspect-ratiocss /* CSS */ .media { aspect-ratio: 16 / 9; } /* Tailwind */
/* Decimal */ 1.778 Prefer the CSS property over the old padding-bottom trick: it reserves the space before the image arrives, so nothing jumps, and it works on any element, not only on a wrapper with an absolutely positioned child. [Made something you like?Gallery blocks that use it](/blocks/gallery) ## Questions Which is better, aspect-ratio or padding-bottom?+ The property. The padding trick needs a wrapper with an absolutely positioned child and only works because padding percentages are relative to width. aspect-ratio applies to any element, keeps working when a min-height is set, and every current browser supports it. Why does Tailwind have aspect-video but not aspect-4/3?+ Only 16:9 and 1:1 are common enough to earn a name. Everything else is an arbitrary value, aspect-\[4/3\], which compiles to the same property. The tool prints the named class when one exists and the arbitrary form otherwise. How does the tool reduce 1920 by 1080 to 16:9?+ By the greatest common divisor, the same way you would by hand. Dimensions with decimals are rounded to the nearest thousandth first so the ratio stays small enough to read. ## Related tools [Device viewport sizesThe viewport of every device you are asked to support, in the CSS pixels a media query actually reads, with the Tailwind breakpoint each one lands in.](/tools/device-sizes)[px to rem converterConvert between px and rem at any root size, both ways, with the sizes you actually use listed out underneath.](/tools/px-rem-converter)[Clip path generatorCut a real photo into a hexagon, circle, chevron or inset, tune the amount, then copy the clip-path as CSS or as a Tailwind arbitrary value.](/tools/clip-path) Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · ## The tools are free. So is most of the library. 2095 blocks and 1076 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours. [Browse the blocksBrowse the blocks](/blocks) No signup for the tools. MIT for free blocks, commercial licence for Pro. ## Ship the interface, keep the code. New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight. [Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing) ### Library * [Blocks](/blocks) * [Pages](/pages) * [Pieces](/pieces) * [Components](/components) * [Search](/search) ### Learn * [Docs](/docs) * [AI & MCP](/docs/mcp) * [Blog](/blog) * [Free tools](/tools) * [What's new?](/changelog) * [Website Builder](https://beste.co) ### More * [Pricing](/pricing) * [Referrals](/referrals) * [License](/license) * [GitHub](https://github.com/beste-co/beste-ui) ### Shadcn Blocks * [Shadcn Hero Blocks](/blocks/hero) * [Shadcn Feature Blocks](/blocks/feature) * [Shadcn Pricing Blocks](/blocks/pricing) * [Shadcn CTA Blocks](/blocks/cta) * [Shadcn FAQ Blocks](/blocks/faq) * [Shadcn About Blocks](/blocks/about) * [Shadcn Stats Blocks](/blocks/stats) * [Shadcn Footer Blocks](/blocks/footer) * [Shadcn Navigation Blocks](/blocks/navigation) * [Shadcn Auth Blocks](/blocks/auth) * [Shadcn Ecommerce Blocks](/blocks/ecommerce) * [Shadcn Portfolio Blocks](/blocks/portfolio) * [Shadcn Showcase Blocks](/blocks/showcase) * [Shadcn Careers Blocks](/blocks/careers) * [Shadcn Onboarding Blocks](/blocks/onboarding) * [Shadcn Coming Soon Blocks](/blocks/coming-soon) * [Shadcn Post Blocks](/blocks/post) * [Shadcn Legal Blocks](/blocks/legal) * [Shadcn Workflow Blocks](/blocks/workflow) * [Shadcn News Blocks](/blocks/news) © 2026, [Beste](https://beste.co). All rights reserved.