new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/aspect-ratio

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

aspect-ratio utility classes table

Tailwind v4 aspect-ratio utilities map to CSS as follows: 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>;

aspect-ratio arbitrary fraction example

You can use utilities like aspect-3/2 to set a specific aspect ratio on an element, e.g. <img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />.

aspect-video utility default value

The aspect-video utility sets aspect-ratio to var(--aspect-video), which resolves to 16 / 9 by default. It is commonly used on iframe or video elements, e.g. <iframe class="aspect-video ..." src="..."></iframe>.

aspect-ratio custom value via arbitrary calc

You can pass an arbitrary CSS value to the aspect-ratio property using square bracket syntax, e.g. aspect-[calc(4*3+1)/3] sets aspect-ratio directly using the CSS custom value syntax; this follows the general UsingACustomValue pattern for the aspect-ratio property/variable.

aspect-ratio responsive design example

Aspect ratio utilities can be applied responsively using breakpoint prefixes, e.g. an iframe can default to aspect-video and switch to aspect-square at a larger breakpoint (this follows Tailwind's standard responsive prefix pattern like md:aspect-square).

Native aspect-ratio property in v3.0

Tailwind CSS v3.0 added support for the native CSS aspect-ratio property with utilities like aspect-video for responsive aspect ratio sizing.

Give your agent this brain