Codestin Search App

CSS <ratio> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <ratio> CSS data type represents a proportional relationship between two numbers, typically used to define an aspect ratio for elements. Unlike fixed units such as <length> or percentages, a <ratio> expresses a relative width-to-height relationship, allowing elements to scale dynamically while maintaining a specific proportion. This is particularly useful for responsive designs, where preserving the shape of an element, such as an image, video, or container, is important regardless of the screen size.

In practice, <ratio> is often employed in properties like aspect-ratio, which can accept values in the form of “width / height.” For example, setting an aspect ratio of 16:9 ensures that an element retains that rectangular shape even when resized:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #000;
}

One of the advantages of the <ratio> type is that it allows for flexible, content-aware layouts without relying on fixed heights or complex JavaScript calculations. It can also interact seamlessly with other CSS features, such as min-width or max-height, enabling developers to constrain the scaling behavior while keeping the intended proportion intact.

Additionally, the <ratio> data type is not limited to integer values. Decimal ratios are valid, which allows for fine-tuning layouts:

.square-box {
  aspect-ratio: 1 / 1; /* Perfect square */
  width: 150px;
  background-color: coral;
}

.banner {
  aspect-ratio: 2.35 / 1; /* Cinematic banner ratio */
  width: 100%;
  background-color: #333;
}

By using <ratio>, designers can ensure consistent visual experiences across different devices, making it a powerful addition to the modern CSS toolbox.

Syntax

property: <ratio>;

Values

<ratio>Is a positive (not zero or negative) <integer> followed by optional whitespace, followed by a solidus ('/'), followed by optional whitespace, followed by a positive <integer>.

Example

HTML

<div class="gallery">

    <figure class="card ratio-1-1">

        <div class="content">1 / 1</div>

    </figure>



    <figure class="card ratio-16-9">

        <div class="content">16 / 9</div>

    </figure>



    <figure class="card ratio-4-3">

        <div class="content">4 / 3</div>

    </figure>



    <figure class="card ratio-auto">

        <img src="https://placehold.co/400x200" alt="Placeholder image">

        <figcaption>Intrinsic image ratio</figcaption>

    </figure>

</div>

CSS

/* Gallery layout */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Card base styling */
.card {
    background: linear-gradient(135deg, #6dd5fa 0%, #2980b9 100%);
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.card .content {
    padding: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.card figcaption {
    padding: 0.5rem 0.75rem;
    background: rgba(0,0,0,0.12);
    width: 100%;
    font-size: 0.9rem;
}

/* Examples of the CSS  data type via the aspect-ratio property */
.ratio-1-1 {
    /* a square: 1/1 (ratio) */
    aspect-ratio: 1 / 1;
}

.ratio-16-9 {
    /* widescreen: 16/9 (ratio) */
    aspect-ratio: 16 / 9;
}

.ratio-4-3 {
    /* classic photo: 4/3 (ratio) */
    aspect-ratio: 4 / 3;
}

/* Intrinsic media keeps its own ratio; constrain width instead */
.ratio-auto img {
    width: 100%;
    height: auto;
    display: block;
}

/* Fallback for older browsers (optional): padding-top technique for a 16:9 box */
/* .ratio-16-9 { position: relative; padding-top: calc(9 / 16 * 100%); height: 0; }
   .ratio-16-9 > * { position: absolute; inset: 0; } */

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ratio data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.