Para eso necesitas un cuadrado responsive. No necesitas ninguna otra unidad de medida que porcientos. Para eso debes hacer un contenedor de elementos posicionados y luego usando padding
especificar el alto de tu contenedor. Esto es posible porque cuando se especifica en porciento se calcula así:
Con respecto a la anchura("width") del bloque que lo contiene.
Así que si especificas el ancho en porcientos puedes también especificar el alto en porcientos. Si usas el mismo número para ambos será un cuadrado en cualquier resolución.
Esta técnica es la más compatible con todos los navegadores y además se integra mejor con los otros sistemas de rejillas de frameworks CSS como bootstrap que son basados en porcientos.
Usar vm
es una mala idea porque esta unidad se refiere a porciento del viewport, no a porciento del elemento contenedor como debería ser. Imagina que pones un sidebar y ya tu código no funciona porque el sidebar está ocupando parte de ese porciento.
Primero crea tu container cuadrado
.responsive-container {
position: relative; // Para contener los hijos absolutos
width: 50%; // La dimensión que quieras
height: 0; // Eliminas el alto para especificarlo con padding
padding: 50% 0 0; // top igual que el width y los demás en 0
}
Luego haces un container o una clase para la imagen que sea absoluto
y que cubra todo su elemento padre.
.image-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
El responsive-container
no tiene alto pero el padding
le crea un espacio que es ocupado completamente por el image container
. Aquí tienes varias opciones para mostrar las imagenes como usar background-image
o que tu image container
sea la imagen como tal. Aquí te dejo algunas variantes que se me ocurren.
.responsive-container {
float: left;
position: relative;
width: 50%;
height: 0;
padding: 50% 0 0;
}
.image-bg1,
.image-bg2 {
background-image: url(https://picsum.photos/400/300);
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.image-bg2 {
background-image: url(https://picsum.photos/600/300);
}
<div class="responsive-container">
<div class="image-bg1"></div>
</div>
<div class="responsive-container">
<div class="image-bg2"></div>
</div>
También puedes usar elementos img
.responsive-container {
float: left;
position: relative;
width: 50%;
height: 0;
padding: 50% 0 0;
}
.image-bg {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="responsive-container">
<img class="image-bg" src="https://picsum.photos/400/300">
</div>
<div class="responsive-container">
<img class="image-bg" src="https://picsum.photos/600/300">
</div>
Es sólo para que veas que tienes muchas posibilidades siempre y cuando uses padding
para generar tu layout.
En este último ejemplo estoy usando la mitad de la pantalla y aún funciona
.screen-half {
width: 50%;
margin: 0 auto;
}
.responsive-container {
float: left;
position: relative;
width: 50%;
height: 0;
padding: 50% 0 0;
}
.image-bg1,
.image-bg2 {
background-image: url(https://picsum.photos/400/300);
background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.image-bg2 {
background-image: url(https://picsum.photos/600/300);
}
<div class="screen-half">
<div class="responsive-container">
<div class="image-bg1"></div>
</div>
<div class="responsive-container">
<div class="image-bg2"></div>
</div>
</div>