Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Galeria de imágenes estilo instagram

Estas en el tema de Galeria de imágenes estilo instagram en el foro de CSS en Foros del Web. Hola Estoy intentando hacer una galeria de imágenes con Bootstrap y quiero imitar el estilo de instagram. Es decir quiero lograr que imágenes con diferentes ...
  #1 (permalink)  
Antiguo 31/01/2017, 06:26
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 0
Galeria de imágenes estilo instagram

Hola

Estoy intentando hacer una galeria de imágenes con Bootstrap y quiero imitar el estilo de instagram.

Es decir quiero lograr que imágenes con diferentes altos y anchos queden centradas en una caja cuadrada y se escalen según estos parámetros.

Un ejemplo de lo que quiero conseguir es este:
https://www.instagram.com/magnumphotos/

Tengo el siguiente codigo, con imagenes horizontales y cuadradas esta resuelto, pero a la que pongo una vertical se descuadra. Y no logro con ningun código, forzar el alto máximo.

Código HTML:
<section class="container">
		<div id="galeria" class="row">
			<div class="col-md-4">
					<img src="img/img01.jpg" class="img-responsive">
			</div>
			<div class="col-md-4">
					<img src="img/img02.jpg" class="img-responsive">
			</div>
			<div class="col-md-4">
					<img src="img/img03.jpg" class="img-responsive">
			</div>
		</div>
      </section> 
Alguna sugerencia o algun tema que pueda leer para intentar encontrar una solución.

Mucha gracias
  #2 (permalink)  
Antiguo 06/02/2017, 03:32
 
Fecha de Ingreso: enero-2011
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Galeria de imágenes estilo instagram

Al final lo solucione con media queries y diferenciando estilos en imágenes horizontales y verticales.

Gracias

Etiquetas: estilo, galeria, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:01.