0
282
VistasCómo hacer una cuadrícula rectangular receptiva con imágenes dentro
Estoy tratando de hacer una cuadrícula rectangular en el sitio web de mi cartera con imágenes dentro. El problema es que todas estas imágenes tienen diferentes tamaños, lo que me dificulta crear una buena cuadrícula modular en la que la proporción permanezca igual.
Aquí hay una foto de cómo se ve ahora:
Quiero que todas las imágenes se vean como la imagen superior derecha dentro de la cuadrícula, y cuando la página se haga más pequeña, debe mantener la misma proporción. Me parece bien trabajar con object-fit: cover, por lo que se cortarán partes de la imagen.
Ahora mi código se ve así (escribí solo copié los dos primeros como ejemplo):
.grid:after { content: ''; display: inline-block; /* clear: both; */ column-count: 4; /* column-gap: 0; */ } .element-item { position: relative; border: 1px solid black; width: 50%; height: auto; margin-left: -1px; margin-top: -1px; padding: 10px; background: white; } .element-item img { position: relative; width: 100%; height: 450px; object-fit: cover; } /* CHANGE IMG ON HOVER */ .switch { position: relative; display: inline-block; } .switch .img-top { display: none; position: absolute; top: 0; left: 0; } .switch:hover .img-top { display: inline; } <div class="grid"> <div id="techweek" class="element-item Coding Motion Poster"> <div class="extra">coding</div> <div class="extra">poster</div> <div class="image"> <a href="techweek.html"> <div class="switch"> <img src="img work/TechweekGif1.gif" alt="Glass Back" /> <img src="img work/TechweekGif2.gif" class="img-top" alt="Glass Front" /> </div> </a> </div> <div class="text">Type in Motion <p2>2020</p2> </div> </div> <div id="mytho" class="element-item Book" data-category="alkali"> <div class="extra">book</div> <div class="image"> <a href="mytho.html"> <div class="switch"> <img src="img work/Mytho1.1.jpg" alt="Glass Back" /> <img src="img work/Mytho1.jpg" class="img-top" alt="Glass Front" /> </div> </a> <div class="text">How It Really Happened <p2>2019</p2> </div> </div> </div> </div>
·
Juan Pablo Isaza
Responde la pregunta