Fixed aspect boxes: aspect-auto, aspect-square, aspect-video and arbitrary ratios like aspect-[4/3]. This family contains 3 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
aspect-autoaspect-ratio: auto;
aspect-squareaspect-ratio: 1 / 1;
aspect-videoaspect-ratio: 16 / 9;

Example#

example
html
<iframe class="w-full aspect-video rounded-xl" src="…"></iframe>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • aspect-video (16/9) is the embed standard
  • Combine with object-cover children for gallery tiles

Common mistakes#

  • Setting both height and aspect-ratio — the explicit height wins

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive