CSS Property: aspect-ratio

The aspect-ratio property allows you to define the ratio between the width and height of an element. If both aspect ratio and width properties are set, the height will follow the defined aspect ratio. The first number specifies the width ratio, and the second specifies the height. If not set, the default value for height is one (1).

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aspect-ratio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 5/3;
            width: 300px;
            background: orange;
            border-radius: 6px;
            color: #333333;
            -webkit-text-fill-color: #333333;
        }
    </style>
</head>
<body>
<div>Welcome to the CSS tutorial.</div>
</body>
</html>

RESULT