Valor de la relación CSS

La relación de aspecto CSS se define como la relación entre ancho y alto (ancho:alto). y la relación de aspecto de las características especificadas como valor de <ratio> que representan la ventana gráfica de ancho a alto. También podemos usar min-aspect-ratio y max-aspect-ratio para valores mínimos y máximos respectivamente.

Las proporciones válidas incluyen:

16/9, 4/3, 800/600, and 1/1

Para más https://www.geeksforgeeks.org/css-media-rule/

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
  
    <style>
        @media (min-aspect-ratio: 9/5) {
            div {
                background: #808000;
            }
        }
  
        @media (max-aspect-ratio: 3/2) {
            div {
                background: #ff99aa;
            }
        }
  
        @media(aspect-ratio:1/1) {
            div {
                background: #424395;
            }
        }
    </style>
</head>
  
<body>
    <div id="hello">
        LOOK AT THE ASPECT RATIOS.
        GEEKS FOR GEEKS BEST WEBSITE GEEKS.
    </div>
</body>
  
</html>

Salida:

después de cambiar el tamaño:

Navegadores compatibles:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • safari de manzana
  • Ópera

Publicación traducida automáticamente

Artículo escrito por viv_007 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *