monks/aspect_ratio

The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element’s box. This means that even if the parent container or viewport size changes, the browser will adjust the element’s dimensions to maintain the specified width-to-height ratio. The specified {{glossary(“aspect ratio”)}} is used in the calculation of auto sizes and some other layout functions.

At least one of the box’s sizes needs to be automatic in order for aspect-ratio to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box’s preferred sizes.

Values

auto_

</>

pub const auto_: #(String, String)

: {{glossary(“Replaced elements”)}} with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for aspect-ratio

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for aspect-ratio. It will be wrapped in var() and have -- prepended.