0

EStoy intentando hacer esto

introducir la descripción de la imagen aquí

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...

introducir la descripción de la imagen aquí

Que todo cambie de tamaño proporcionalmente...

2
  • Intenta añadir media queries, para controlar el aspecto en diferentes dispositivos. Saludos. el 5 jul. 2022 a las 1:51
  • Los media query no funcionan para todos los casos. En este, en especifico, necesito que siempre mantenga las proporciones, usando media querys solo controlaria en ciertos tamaños especificos de pantalla, si esta se hace un poco mas pequeña inmediatamente perderian la proporcion. el 6 jul. 2022 a las 1:12

1 respuesta 1

1

Bien, encontre la solucion, es un atributo que quizas no muchos conozcan, hasta hoy yo no lo hacia, es aspect-ratio Con esto puedes decidir que aspecto debería tener una imagen o Div cuando la pantalla se deforma... En mi caso, poner que tenga proporcion 1/1 o bien, la proporcion del alto respecto al ancho

.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%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.small .img1 {
    padding: 3px;
}

.small .img2 {
    padding: 3px;
}

.grid-blog-image .big {
    width: 40%;
    display: inline-block;
    object-fit: cover;
    padding: 3px;
}

.big img {
    width: 100%;
    aspect-ratio: 320/320;
    background-size: cover;
    object-fit: cover;
}

.grid-blog-image .large {
    width: 40%;
    height: 100%;
    display: inline-block;
    object-fit: cover;
}

.large img {
    display: block;
    width: 100%;
    aspect-ratio: 320/160;
    object-fit: cover;
    /* background: red; */
}

.large .img1 {
    padding: 3px 3px 3px 4px;
}

.large .img2 {
    padding: 3px 3px 3px 4px;
}
<section class="grid-blog-image">
    <div class="small">
        <img src="https://cdnb.artstation.com/p/assets/images/images/024/538/827/original/pixel-jeff-clipa-s.gif?1582740711" alt="" class="img1">
        <img src="https://cdnb.artstation.com/p/assets/images/images/024/538/827/original/pixel-jeff-clipa-s.gif?1582740711" alt="" class="img2">
    </div>
    <div class="big">
        <img src="https://cdnb.artstation.com/p/assets/images/images/024/538/827/original/pixel-jeff-clipa-s.gif?1582740711" alt="">
    </div>
    <div class="large">
        <img src="https://cdnb.artstation.com/p/assets/images/images/024/538/827/original/pixel-jeff-clipa-s.gif?1582740711" alt="" class="img1">
        <img src="https://cdnb.artstation.com/p/assets/images/images/024/538/827/original/pixel-jeff-clipa-s.gif?1582740711" alt="" class="img2">
    </div>
</section>

Queda asi en pantalla completa de pc

introducir la descripción de la imagen aquí

y asi cuando es movil, todo se mantiene proporcionado

introducir la descripción de la imagen aquí

1
  • Ok, por algun motivo el cuadro grande no aplica los paddings que le agregué, pero en mi pagina si funciona bien, no se a que se deba que aqui no los muestra... el 4 jul. 2022 a las 20:35

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.