Si te encuentras con algún detalle que no entiendes puedes comentarlo y te responderemos lo más rápido posible.
Solución:
Usar el ancho de la ventana gráfica (vw) para definir el ancho en la propiedad de altura:
width: calc(100% - 20px)
height: calc((100vw - 20px) * 0.5625) /*16:9 aspect ratio*/
los viewport es el área visible de la página web.
Su tamaño completo es 100vw * 100vhdónde vw y wh son las unidades de tamaño de las ventanas gráficas.
Así uno”vw” es igual a 1% del ancho actualmente visible de la página web.
Puede encontrar más en: Unidades de ventana gráfica: vw, vh, vmin, vmax
las soluciones propuestas hasta ahora usan vw, que solo funcionan si desea que la imagen llene toda la página.
pero hay una solución mucho más limpia que mantiene la relación de aspecto de la imagen 9/16 en contenedores de todos los tamaños.
HTML:
...
CSS:
.image
position: relative;
display: block;
width: calc(100% - 20px);
max-width: calc(100% - 20px);
height: auto;
max-height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
.image::before
display: block;
content: "";
.image, .image img
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
.image-9-16::before
padding-top: 56.25%;
y eso funcionará sin importar el ancho del contenedor que contiene la imagen sin necesidad de colocar la imagen como imagen de fondo… y ahora incluso puede agregar más relaciones de aspecto si lo desea…
.image-1-1::before
padding-top: 100%;
.image-3-4::before
padding-top: 75%;
.image-9-21::before
padding-top: 42.857143%;
...