Aspect Ratios

Preferred Aspect Ratios: the 'aspect-ratio' property

	Name: aspect-ratio
	Value: auto || <>
	Initial: auto
	Inherited: no
	Applies to: all elements except inline boxes and internal ruby or table boxes
	Computed value: specified keyword or a pair of numbers
	Animation type: by computed value
	

auto

Replaced elements with a natural aspect ratio use that aspect ratio; otherwise the box has no preferred aspect ratio. Size calculations involving the aspect ratio work with the content box dimensions always.

<>

The box’s preferred aspect ratio is the specified ratio of ''width / height''. Size calculations involving the aspect ratio work with the dimensions of the box specified by 'box-sizing'. If the <> is [=degenerate ratio|degenerate=], the property instead behaves as ''aspect-ratio/auto''.

auto && <>

If both ''aspect-ratio/auto'' and a <> are specified together, the [=preferred aspect ratio=] is the specified ratio of ''width / height'' unless it is a [=replaced element=] with a [=natural aspect ratio=], in which case that aspect ratio is used instead. In all cases, size calculations involving the aspect ratio work with the [=content box=] dimensions always. If the <> is [=degenerate ratio|degenerate=], the property instead behaves as ''aspect-ratio/auto''. aspect-ratio/block-aspect-ratio-050.html

			ul {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
			}
			li {
				aspect-ratio: 1/1;
				overflow: auto;
			}
		

			<iframe
			  src="https://www.youtube.com/embed/0Gr1XSyxZy0"
			  width=560
			  height=315>
		

			@supports (aspect-ratio: attr(width number) / 1) {
			  iframe {
			    aspect-ratio: attr(width number) / attr(height number);
			    width: 100%;
			    height: auto;
			  }
			}
		

Effects of Preferred Aspect Ratio on Automatic Sizes

Margin-collapsing

Automatic Content-based Minimum Sizes

		  div {
		    aspect-ratio: 1/1;
		    /* 'width' and 'height' both default to 'auto' */
		  }
		

		+----------+  +----------+  +----------+
		| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
		| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
		| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
		|          |  | ~~~      |  | ~~~~~~~~ |
		+----------+  +----------+  | ~~~~~~~~ |
		                            | ~~~~~~   |
		                            +----------+
		

		  div {
		    overflow: auto;
		    aspect-ratio: 1/1;
		  }
		

		+----------+  +----------+  +----------+
		| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~^|
		| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
		| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
		|          |  | ~~~      |  | ~~~~~~~~v|
		+----------+  +----------+  +----------+
		

		  div {
		    aspect-ratio: 1/1;
		    min-height: 0;
		  }
		

		+----------+  +----------+  +----------+
		| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
		| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
		| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
		|          |  | ~~~      |  | ~~~~~~~~ |
		+----------+  +----------+  +-~~~~~~~~-+
		                              ~~~~~~    
		

			<div style="height: 100px; aspect-ratio: 1/1;">
				<span style="display: inline-block; width: 50px;"></span>
				<span style="display: inline-block; width: 150px;"></span>
			</div>
		

Min/Max Size Transfers

			<div id=container style="height: 100px; float: left;">
				<div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
			</div>
		

			<div id=container style="height: auto; float: left;">
				<div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
			</div>
		

Intrinsic Size Determination

Intrinsic Sizes

Overriding Contained Intrinsic Sizes: the 'contain-intrinsic-*' properties

	Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
	Value: auto? [ none | <> ]
	Initial: none
	Inherited: no
	Logical property group: contain-intrinsic-size
	Applies to: elements with [=size containment=]
	Computed value: as specified, with <> values computed
	Percentages: n/a
	Animation type: by computed value type
	

: none | <> :: If no other 'contain-intrinsic-size' value (such as ''contain-intrinsic-size/auto'') is providing an [=explicit intrinsic inner size=], the corresponding axis either doesn't have an [=explicit intrinsic inner size=] (if ''contain-intrinsic-size/none'' is specified) or has an [=explicit intrinsic inner size=] of the specified <>. : auto :: If ''contain-intrinsic-size/auto'' is specified and the element has a [=last remembered size=] and is currently [=skipping its contents=], its [=explicit intrinsic inner size=] in the corresponding axis is the [=last remembered size=] in that axis. Note: This occurs, for example, when an element with ''content-visibility: auto'' is off-screen. content-visibility/content-visibility-058.html

	Name: contain-intrinsic-size
	Value: [ auto? [ none | <> ] ]{1,2}
	

Last Remembered Size

Interaction With ''overflow: auto''

		div {
			width: max-content;
			contain-intrinsic-size: 100px 100px;
			overflow: auto;
		}
		

		div {
			width: max-content;
			contain-intrinsic-size: 100px 100px;
			height: 50px;
			overflow: auto;
		}
		

Responsively-sized iframes: the 'frame-sizing' property

	Name: frame-sizing
	Value: auto | content-width | content-height | content-block-size | content-inline-size
	Initial: auto
	Applies to: replaced elements (but see below for details)
	Inherited: no
	Computed value: as specified
	Animation type: discrete
	

: auto :: The element's [=internal layout intrinsic size=], if any, is ignored. : content-width : content-height : content-block-size : content-inline-size :: If the element has an [=internal layout intrinsic size=], its [=intrinsic size=] takes the corresponding dimension (either width or height) from the [=internal layout intrinsic size=]. (The other dimension is determined normally.) Logical directions resolve based on the [=writing mode=] of the element. (Not the embedded document.)

			iframe {
				frame-sizing: content-height;
			}
		

HTML <{iframe}> Details

Extensions to the {{Window}} Interface

Intrinsic Size Contributions

Zeroing Min-Content Size Contributions: the 'min-intrinsic-sizing' property

	Name: min-intrinsic-sizing
	Value: legacy | zero-if-scroll || zero-if-extrinsic
	Initial: legacy
	Inherited: no
	Applies to: all elements except [=inline boxes=]
	Computed value: as specified
	Percentages: n/a
	Animation type: discrete
	

legacy

The box’s [=min-content contribution=] is handled as normal.

zero-if-scroll

The box’s [=min-content contribution=] is “compressed” if it is a [=scroll container=].

zero-if-extrinsic

The box’s [=min-content contribution=] is “compressed” if has an [=extrinsic size|extrinsic=] [=preferred size|preferred=] or [=maximum size|maximum=] size. Note: This is the default behavior of most [=replaced elements=].

*, ::before, ::after { min-intrinsic-size: zero-if-scroll; }

Extrinsic Size Determination

Stretch-fit Sizing: filling the containing block

		  .parent { height: 200px; border: solid; }
		  .child { height: stretch; margin: 10px; }
		

		  .outer { height: 200px; margin: 0; }
		  .inner { height: stretch; margin: 10px; }
		

		  <div class="parent">
		    <div class="child">text</div>
		  </div>
		  some more text
		

			.parent { float: left; margin: 0; }
			.child { width: stretch; margin: 10px; }
		

		  .parent { height: auto; margin: 0; }
		  .child { height: stretch; margin: 10px; }
		

Contain-fit Sizing: stretching while maintaining an aspect ratio

1. The initial target rectangle is the size of the box’s containing block, with any indefinite size assumed as infinity. If both dimensions are indefinite, the initial target rectangle is set to match the outer edges of the box were it stretch-fit sized.
2. Next, if the box has a non-''max-width/none'' 'max-width' or 'max-height', the target rectangle is clamped in the affected dimension to less than or equal to the “maximum size” of the box’s margin box, i.e. the size its margin box would be if the box was sized at its max-width/height. (Note that, consistent with normal box-sizing rules, this “maximum size” is floored by the effects of the box’s 'min-width'/'min-height'.)
3. Last, the target rectangle is reduced in one dimension by the minimum necessary for it to match the box's [=preferred aspect ratio=].

Percentage Sizing

Changes

Changes since 5 May 2021 Working Draft

Changes since 20 October 2020 Working Draft

Additionally, sizing constraints in either axis (the origin axis) are transferred through the [=preferred aspect ratio=] to the other axis (the destination axis) as follows: * First, any [=definite=] [=minimum size=] is converted and transferred from the origin to destination axis. This transferred minimum is capped by any [=definite=] [=preferred size|preferred=] or [=maximum size=] in the destination axis. * Then, any [=definite=] [=maximum size=] is converted and transferred from the origin to destination. This transferred maximum is floored by any [=definite=] [=preferred size|preferred=] or [=minimum size=] in the destination axis as well as by the transferred minimum, if any. Note: The basic principle is that sizing constraints transfer through the aspect-ratio to the other side to preserve the aspect ratio to the extent that they can without violating any sizes specified explicitly on that affected axis.

If a replaced element's only natural dimension is a natural width or a natural height, giving it a [=preferred aspect ratio=] also gives it a natural height or width, whichever was missing, by transferring the existing size through the [=preferred aspect ratio=].

For the purpose of margin collapsing ([[css2/box#collapsing-margins]]), if the [=block axis=] is the [=ratio-dependent axis=], it is not considered to have a [=computed value|computed=] 'block-size' of ''height/auto''.

Additions Since Level 3

• Added ''stretch'', ''fit-content'', and ''contain'' keywords for sizing properties.
• Added 'aspect-ratio' property.
• Added 'contain-intrinsic-width', 'contain-intrinsic-height', 'contain-intrinsic-block-size', and 'contain-intrinsic-inline-size' properties and their shorthand 'contain-intrinsic-size'.
• Added 'min-intrinsic-sizing' property.

Acknowledgments

Special thanks go to Aaron Gustafson, L. David Baron for their contributions to this module.

Privacy Considerations

Security Considerations