Mostrar Imagen desde el centro en un div

publicado por: Anonymous

Buenas.
Tengo el siguiente problema, un archivo index que muestra fotos con la url desde una base de datos, cada foto esta ordenada en col-md-4 de bootstraps o sea que tengo 3 fotos por fila, 3 abajo , 3 abajo y asi.
El problema que tengo es que las fotos no tienen el mismo tamaño algunas son cuadradas y otras horizontales, esto hace que se me desarme el grid de bootstrap y no me queden las fotos ordenadas en 3 por fila, por mas que ponga img-responsive es lo mismo la forma de la imagen desarma el grid. Probe usando un codigo que corta segun un eje x e y la foto pero como todas las fotos no son iguales no se si lo que tengo que mostrar esta arriba a la derecha, al centro abajo, etc. Lo que necesito es poder mostrar la imagen desde el centro en el div y lo que salga por fuera del div que no lo muestre, como tiene facebook por ejemplo en las galerias, como ven las 3 imagenes de abajo son distintas, dos cuadradas y una rectangular pero la vista previa me las muestra a las 3 iguales solo que a la del rectangulo le muestra el centro. Encontre algo que se llamaba crop pero tampoco me sirvio, me dan una mano? Se lo que quiero hacer pero no se como buscarlo.

introducir la descripción de la imagen aquí

Arme esto rapido recien:

<body>
   <br><br>
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <div class="col-md-4"><img src="imagenPrueba/1.jpg" alt="" class="img-responsive" style="overflow: hidden"></div>
               <div class="col-md-4"><img src="imagenPrueba/2.jpg" alt="" class="img-responsive" style="overflow: hidden"></div>
               <div class="col-md-4"><img src="imagenPrueba/3.jpg" alt="" class="img-responsive" style="overflow: hidden"></div>
               <div class="col-md-4"><img src="imagenPrueba/4.jpg" alt="" class="img-responsive" style="overflow: hidden"></div>
               <div class="col-md-4"><img src="imagenPrueba/5.jpg" alt="" class="img-responsive" style="overflow: hidden"></div>
               <div class="col-md-4"><img src="imagenPrueba/6.jpg" alt="" class="img-responsive" style="overflow: hidden"></div>
           </div>
       </div>
   </div>

Si las imagenes no son iguales no me las muestra en cuadrado:

introducir la descripción de la imagen aquí

solución

Esto es lo que hice y como quedo:
Los datos los traigo de la base y meti el codigo de 4 columnas de bootstrap dentro de un while (Ese era el problema que tenia, full pantalla andaba ok, al achicar la pantalla si als imagenes no eran iguales la grilla de bootsrap se rompia)

<div class="col-md-4">
  <div class="contenedor-img ejemplo-1 thumbnail">  
    <img src="<?php echo $row['carpeta'];?> " alt="" **style="width: 100%; height: 300px; object-fit: cover;"**>
       <div class="mascara">  
         <h2><b><?php echo $row['titulo'];?></b></h2>  
          <a href="<?php echo $row['direccion'];?>" class="link" style="margin-top: 15%;"><b>CLICK PARA VER GALERIA</b></a>  
        </div>  
        <div style="background-color: #000; color: #ffffff;">
            <center><label><h5><b><?php echo $row['titulo'];?></b></h5></label></center>
        </div>
    </div>
</div>

Pantalla completa:

introducir la descripción de la imagen aquí

Pantalla achicada:

introducir la descripción de la imagen aquí

Eso era basicamente lo que necesitaba, que mantenga el tamaño del 100% del div y que la imagen se vea desde el centro, asi no se desarmaba el div de 4 columnas. Gracias a todos por su ayuda.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *