0

Por favor, porque no cambian de tamaño?

(!--NO AGREGUE MAS IMAGENES AL HTML XQUE NO SE REDIMESIONAN--> si hago todo este codigo, pero sin agregar imagenes, solo contenido alfanumerico funciona bien, pero con imagenes NO)

HTML:

<div class="imagen"><img src="/imagenes/perro salchicha.jpg" alt=""></div>
<div class="imagen"><img src="/imagenes/leaves33.webp" alt=""></div>
<div class="imagen"><img src="" alt=""></div>
<div class="imagen"><img src="" alt=""></div>
<div class="imagen"><img src="" alt=""></div>
<div class="imagen"><img src="" alt=""></div>
<div class="imagen"><img src="" alt=""></div>
<div class="imagen"><img src="" alt=""></div>
<div class="imagen"><img src="" alt=""></div>
<div class="imagen"><img src="" alt=""></div>

</div>

CSS:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 20px;
padding: 20px;
grid-auto-flow: dense

}

.imagen {
width: 150px;
height: 150px;

} .grid-items{

display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: transform 0.3s ease-in-out;
border: solid 1px white;

}

.grid-container:hover{
filter: opacity(0.9);
transform: scale(1.04);

}

.item1 {
grid-column-start: 1;
grid-column-end: -1;

}

.wide{
grid-column: span 2;

}

.tall{
grid-row: span 2;

}

1
  • QUISE DECIR CSS, NO CDSS
    – Emiliano
    Commented el 1 jun. 2021 a las 22:59

1 respuesta 1

1

Si eso fue todo tu CSS, entonces te faltó ajusta la imagen misma a su contenedor, de esta forma:

.imagen img {
 display: block;
 width: 100%;
 height: auto;
}
1
  • 1
    GRACIAS!!!! ERA ESO !!!
    – Emiliano
    Commented el 1 jun. 2021 a las 23:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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