Logical sizing properties

1. Introduction

1.1. Logical sizing shorthand: the size property

Where

<sizing> = [  <inline-size-dimension> |
  [ <inline-size-dimension> <block-size-dimension> ]
]

<inline-size-dimension> = [  <‘inline-size’> |
  <‘aspect-ratio’> |
  [ <‘min-inline-size’>/<‘max-inline-size’> ] |
  [ <‘min-inline-size’>/[<‘inline-size’>|<‘aspect-ratio’>]/<‘max-inline-size’> ]
]

<block-size-dimension> = [  <‘block-size’> |
  <‘aspect-ratio’> |
  [ <‘min-block-size’>/<‘max-block-size’> ] |
  [ <‘min-block-size’>/[<‘block-size’>|<‘aspect-ratio’>]/<‘max-block-size’> ]
]

The size property is a shorthand property for setting logical sizing and box sizing.

If only inline-size-dimension is specified block-size-dimension is set to the same value unless an aspect-ratio is defined in which case block-size-dimension and inline-size-dimension are set to auto and the aspect-ratio is used.

img {
  size: 12px;
}

img {
  size: calc(2/1);
}

When only the max/min sizes are specified block-size/inline-size are set to auto. If both inline-size-dimension and block-size-dimension are specified they specify inline-size and block-size respectively.

img {
  size: 12px 12px/20px border-box;
}

If aspect-ratio is defined in both inline-size-dimension and block-size-dimension it is a syntax error.

1.2. Aspect based sizing: the aspect-ratio property

Note: The term "min or max constraints" refers to min-width, max-width, min-height, and max-height, whichever is appropriate for the dimension in question.

The aspect-ratio property controls the resolution of underspecified values for the width and height properties of elements in CSS, such that the ratio of the inline-size and 'block-size is a specific value.

For elements in in-flow, width or height are underspecified if the computed values of width/height for the element are auto and the element is not a replaced element. For out-of-flow elements, width is underspecified if the computed value for width on the element is auto and the computed values of left or right are auto; height is underspecified if the computed value for height on the element is auto and the computed values of left or right are auto.

What about replaced elements?

The <number> in the value of the property must be greater than zero. If it is not, it is a syntax error.

If aspect-ratio is none, it must have no effect.

If aspect-ratio is not none, but neither width nor height are underspecified for the element, aspect-ratio must have no effect.

Brad Kemper points out that it may be better for back-compat to have aspect-ratio override in this case, just ignoring the block-size dimension. This would let someone specify a "default" ratio via an explicit width/height, and have aspect-ratio take over to ensure it actually maintains the desired ratio.

• If the element’s block-size is underspecified and the inline-size is not, then the used value of the element’s block-size must be the result of dividing the element’s inline-size by the aspect-ratio. If this would cause the element’s block-size to be in violation of a min or max constraint, the block-size must instead be the value required by those constraints.
• If the element’s inline-size is underspecified and the block-size is not, then the used value of the element’s inline-size must be the result of multiplying the element’s block-size by the aspect-ratio. If this would cause the element’s inline-size to be in violation of a min or max constraint, the inline-size must instead be the value required by those constraints.
• If both the inline-size and block-size are underspecified, first resolve the inline-size of the element normally, then follow these steps:
  • Attempt to set the used value of the element’s block-size to the result of dividing the element’s inline-size by the aspect-ratio.
  • If the previous step would cause the element’s block-size to be in violation of a min or max constraint, then instead set the element’s block-size to the value required by those constraints, then attempt to set the used value of the element’s inline-size to the result of multiplying the element’s block-size by the aspect-ratio.
  • If the previous step would cause the element’s inline-size to be in violation of a min or max constraint, then instead ignore the aspect-ratio property on this element.

    For example, given an element with width:auto; height:auto; aspect-ratio: calc(2/1); max-height: 200px; in a 500px wide container, the element would first be set to 500px wide, then aspect-ratio would naively set the height to 250px, which is in violation of the max-height constraint. Instead, the element’s height becomes 200px and the width is set to 400px. If the element additionally had min-width: 450px, aspect-ratio would be completely ignored, as there’s no way to satisfy it.

    Should we instead make it try and satisfy the aspect ratio somehow?

    Note: This property take a single number as the ratio value. However, several common ratios are usually expressed as fractions or explicit ratios, such as "16 by 9". These can be easily expressed using the calc() function, like aspect-ratio: calc(16/9);.

    Note: Videos, in particular, often do not exactly match a 4:3 or 16:9 ratio, even if they are advertised as such, because they are encoded with non-square pixels. As such, setting a <video> element to one of those ratios may end up with the element’s ratio not quite matching the content’s ratio. However, the default style for <video> in HTML (using the object-fit property) will letterbox the content, so it’s not scaled in an ugly fashion.