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