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;
}