Show image from the center in a div

Question

Show image from the center in a div

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Good morning. I have the following problem, an index file that shows photos with the url from a database, each picture is sorted in col-md-4 bootstraps or I have 3 photos per row, 3 down, 3 down and so on. The problem I have is that the photos are not the same size, some are square and others are horizontal, this causes me to disarm the bootstrap grid and I do not keep the photos ordered in 3 per row, no matter how img-responsive it is the same way the image of the image disarms the grid. Probe using a code that cuts according to an x axis and the photo but because all the photos are not the same, I do not know if what I have to show is up to the right, to the center below, etc. What I need is to be able to show the image from the center in the div and what comes out of the div that does not show it, as it has facebook for example in the galleries, as you can see the 3 images below are different, two square and one Rectangular but the preview shows me at 3 equal only that the rectangle shows the center. I found something called crop but it did not help me either, do they give me a hand? I know what I want to do but I do not know how to look for it.

Build this fast new:

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

If the images are not the same, do not show them in a square:

css bootstrap

asked by Juan 15.01.2018 в 13:01

source

3 answers

Obtain registration with two matches in the same relationship table setInterval () with variable times

score 1 · Answer 1

This is what I did and how it is: I bring the data from the base and put the code of 4 columns of bootstrap inside a while (That was the problem I had, full screen was ok, to shrink the screen if the images were not equal the bootstrap grid breaks)

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

Full screen:

Shrinked screen:

That was basically what I needed, that I keep the size of 100% of the div and that the image is seen from the center, so the div of 4 columns was not disarmed. Thank you all for your help.

score 0 · Answer 2

The solution is quite simple, I had the same problem and I recommend that it is best to put a maximum and minimum size for all the images. Put this in your css and add this class to all col-md-4.

.content-img {
min-height: 160px;
max-height: 160px;

}

The size of 160px is referential, put what best fits your images and clear when you click on any of your images load it to a pop-up (Modal), do not forget to rate this answer if it served you.

score 0 · Answer 3

I have 2 suggestions, one is to use background-size: cover and use the images as background in each div, like this:

.contenedor-img{ background-image: url('imagen.jpg'); background-size: cover; }

The other thing you can do is use the unknown property of object-fit , but it depends on a container that is to which you should apply the desired measures, like this:

.contenedor-img{ /*medidas deseadas*/}

.contenedor-img img { object-fit: cover; }

The only thing about this property is that as far as I remember it does not have good support, but if backward compatibility is not a problem it is a good suggestion.