ContextQMD
Back to Tailwindcss

Aspect Ratio

src/docs/aspect-ratio.mdx

latest2.6 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { UsingACustomValue, ResponsiveDesign, CustomizingYourTheme } from "@/components/content.tsx";

export const title = "aspect-ratio"; export const description = "Utilities for controlling the aspect ratio of an element.";

<ApiTable rows={[ ["aspect-<ratio>", "aspect-ratio: <ratio>;"], ["aspect-square", "aspect-ratio: 1 / 1;"], ["aspect-video", "aspect-ratio: var(--aspect-video); /* 16 / 9 */"], ["aspect-auto", "aspect-ratio: auto;"], ["aspect-(<custom-property>)", "aspect-ratio: var(<custom-property>);"], ["aspect-[<value>]", "aspect-ratio: <value>;"], ]} />

Examples

Basic example

Use <code>aspect-<var><ratio></var></code> utilities like aspect-3/2 to give an element a specific aspect ratio:

<Figure desktopHint="Resize the example to see the expected behavior"> <Example resizable> {

} </Example>

html
<!-- [!code classes:aspect-3/2] -->
</Figure>

Using a video aspect ratio

Use the aspect-video utility to give a video element a 16 / 9 aspect ratio:

<Figure desktopHint="Resize the example to see the expected behavior"> <Example resizable> { <iframe className="aspect-video w-full rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen ></iframe> } </Example>
html
<!-- [!code classes:aspect-video] -->
<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</Figure>

Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/villas.jpg" }} utility="aspect" name="aspect ratio" value="calc(4*3+1)/3" variable="aspect-ratio" />

Responsive design

<ResponsiveDesign element="iframe" elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }} property="aspect-ratio" defaultClass="aspect-video" featuredClass="aspect-square" />

Customizing your theme

<CustomizingYourTheme element="iframe" elementAttributes={{ src: "https://www.youtube.com/embed/dQw4w9WgXcQ" }} utility="aspect" name="aspect ratio" customName="retro" customValue="4 / 3" />