The aspect-ratio property
The aspect-ratio property specifies
an alignment of elements along the transverse
axis for flex blocks and along the inline
axis for grids. Applies to parent element.
Syntax
selector {
aspect-ratio: auto or ratio;
}
Values
| Values | Description |
|---|---|
auto |
An element does not have a preferred aspect ratio and the browser sets it automatically based on the element's width and height. |
ratio |
The ratio is written as 16/9, here
the first number is a width, and the
second number is a height. If a value is
not specified, it is considered equal to
1. It is also possible to write
some ratios as one number. For example,
2/1 can be written as 0.5,
this will give the same result.
|
auto && ratio |
If the aspect ratio comes with the
auto keyword (example: auto 1/2),
then the specified ratio will be selected,
but for the elements being replaced
(such as images and videos) with
its own ratio it will only be used.
|
Example
Let's set the button
to auto aspect ratio:
<p>
<button>Click</button>
</p>
button {
aspect-ratio: auto;
background-color: #9DDFA4;
padding: 1em;
}
:
Example
Now let's set the aspect ratio
for the button as 1/2:
<p>
<button>Click</button>
</p>
button {
aspect-ratio: 1/2;
background-color: #9DDFA4;
padding: 1em;
}
:
See also
-
the
object-fitproperty
that scales elements
