CSS Lastnost: aspect-ratio

Lastnost aspect-ratio omogoča, da določimo razmerje med širino in višino elementa. Če sta nastavljeni lastnosti razmerja stranic in širine, bo višina sledila definiranemu razmerju stranic. Prva številka določa širino stranic, druga višino. Če ni nastavljeno, je število za višino privzeto ena (1).

PRIMER

<!DOCTYPE html>
<html lang="sl">
<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>Dobrodošli v CSS vadnici.</div>
</body>
</html>

REZULTAT