RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio below:

aspect-ratio - CSS | MDN

<section id="default-example">
  <img
    class="transition-all"
    height="640"
    id="example-element"
    src="/shared-assets/images/examples/plumeria.jpg"
    width="466" />
</section>

#example-element {
  height: 100%;
  width: auto;
}

Syntax

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* fallback to 'auto' for replaced elements */
aspect-ratio: auto 3/4;
aspect-ratio: 9/6 auto;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

This property is specified as one or both of the keyword auto or a <ratio>. If both are given, and the element is a replaced element, such as <img>, then the given ratio is used until the content is loaded. After the content is loaded, the auto value is applied, so the intrinsic aspect ratio of the loaded content is used.

If the element is not a replaced element, then the given ratio is used.

Values

auto: 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.
<ratio>: The box's preferred aspect ratio is the specified ratio of width / height. If height and the preceding slash character are omitted, height defaults to 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
auto && <ratio>: When both auto and a <ratio> are specified together, auto is used if the element is a replaced element with a natural aspect ratio, like an <img> element. Otherwise, the specified ratio of width / height is used as the preferred aspect ratio.

Formal definition Formal syntax

aspect-ratio = 
  auto     ||
  <ratio>  <ratio> = 

  <number [0,â]> [ / <number [0,â]> ]?

Examples Exploring aspect-ratio effects with fixed width

In this example, the width of the <div> elements has been set to 100px and height to auto. Since the width value is fixed here, the aspect-ratio property affects only the height of the <div> elements to maintain the specified width-to-height ratio.

<div>1/1</div>
<div>0.5</div>
<div>1</div>
<div>1/0.5</div>
<div>16/9</div>

div {
  display: inline-flex;
  background-color: lime;
  justify-content: center;
}

div {
  width: 100px;
  height: auto;
}
div:nth-child(1) {
  aspect-ratio: 1/1;
}
div:nth-child(2) {
  aspect-ratio: 0.5;
}
div:nth-child(3) {
  aspect-ratio: 1;
}
div:nth-child(4) {
  aspect-ratio: 1/0.5;
}
div:nth-child(5) {
  aspect-ratio: 16/9;
}

Fallback to natural aspect ratio

In this example we are using two <img> elements. The first element does not have its src attribute set to an image file.

<img src="" /> <img src="plumeria.jpg" />

The following code sets 3/2 as the preferred aspect ratio and auto as a fallback.

img {
  display: inline;
  width: 200px;
  border: 2px dashed red;
  background-color: lime;
  vertical-align: top;

  aspect-ratio: 3/2 auto;
}

Note how the first image without replaced content keeps the 3/2 aspect ratio, while the second image after the content is loaded uses the image's natural aspect ratio.

Specifications Browser compatibility

Loadingâ¦