Galería de Imágenes Responsive Metodo3 el mejor metodo
Fecha Publicación:
20 de Julio de 2019
Fecha Modificación:
05 de Enero de 2020
1.- Este es el mejor metodo para una galeria de imagenes usando en el atributo width en la funcion calc el porcentaje al 100%.
Ventajas la separacion de cada item (vertical y Horizontal es el mismo tamaño).
<div class="contenedor">
<div class="item">
<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png">
</div>
<div class="item">
<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
</div>
<div class="item">
<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
</div>
<div class="item">
<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
</div>
<div class="item">
<img src="http://unidadvirtual.com/imagen/plantillas_web/puertasycreaciones-pe-250x250.png" >
</div>
</div>
En item se puso -20px porque como son 3 item por columna y solo tenemos 2 separaciones verticales a cada separación le estamos dando 10px (10x2=20px)
Si fueran 4 item por columna tendriamos 3 separaciones verticales a cada separación le estariamos dando 10px (10x3=30px)
.contenedor{ display: flex;flex-wrap: wrap;box-sizing: border-box;justify-content: space-between}
.contenedor img {display: block;width: 100%; text-align: center;}
.item{ width: calc((100% - 20px)/3); margin-bottom: 10px;}
See the Pen Galería de Imágenes Responsive Metodo3 el mejor metodo by alex huiza (@alextutor) on CodePen.
Articulo : 693 - Veces Leidas