EStoy intentando hacer esto
Pero lo que quiero es que se haga mas pequeño en alto y ancho cuando la pantalla se haga mas pequeña. No tengo idea de como hacer
<section class="grid-blog-image">
<div class="small">
<img src="../../../public/img/carousel/moutains_home.jpg" alt="" class="img1">
<img src="../../../public/img/carousel/moutains_home.jpg" alt="" class="img2">
</div>
<div class="big">
<img src="../../../public/img/carousel/moutains_home.jpg" alt="">
</div>
<div class="large">
<img src="../../../public/img/carousel/moutains_home.jpg" alt="" class="img1">
<img src="../../../public/img/carousel/moutains_home.jpg" alt="" class="img2">
</div>
.grid-blog-image {
max-width: 1000px;
height: 320px;
display: flex;
}
.grid-blog-image .small {
width: 20%;
display: inline-block;
object-fit: cover;
}
.small img {
display: block;
width: 100%;
height: 50%;
object-fit: cover;
}
.small .img1 {
padding-bottom: 3px;
}
.small .img2 {
padding-top: 3px;
}
.grid-blog-image .big {
width: 40%;
display: inline-block;
object-fit: cover;
padding: 0px 6px 0px 6px;
}
.big img {
width: 100%;
height: 100%;
background-size: cover;
object-fit: cover;
}
.grid-blog-image .large {
width: 40%;
display: inline-block;
object-fit: cover;
}
.large img {
display: block;
width: 100%;
height: 50%;
object-fit: cover;
}
.large .img1 {
padding-bottom: 3px;
}
.large .img2 {
padding-top: 3px;
}
El problema es que cuando la pantalla se hace pequeña se deforma, y no quiero que eso suceda, quiero que todo se mantenga proporcional, que la forma del grid sea igual pero sin deformarse, osea que no pase esto...
Que todo cambie de tamaño proporcionalmente...
media query
no funcionan para todos los casos. En este, en especifico, necesito que siempre mantenga las proporciones, usandomedia querys
solo controlaria en ciertos tamaños especificos de pantalla, si esta se hace un poco mas pequeña inmediatamente perderian la proporcion.