2

I am working on a 4x3 image gallery with pictures from a database. All pictures have different sizes. Using Bootstrap and CodeIgniter I make rows and columns for every image. Now I want wide pictures to fit the height of the row, center horizontally and hide the horizontal overflow. I also want that tall pictures fit the width of the column, center vertically and hide the vertical overflow. Just like Facebook.

margin-left: auto; margin-right: auto; don't center the image.

My index page:

<h1><?=$title?></h1>

<?php $i = 1; foreach ($photos as $photo) {
    if ( $i % 3 == 1 ) { ?>
        <div class="row gallery-row">
    <?php } ?>
    <div class="col-md-4">
        <img class="gallery-image" src="<?php echo site_url(); ?>assets/images/<?php echo $photo['photo_name'];?>">
    </div>
    <?php if ( $i % 3 == 0 ) { ?>
        </div>
    <?php }
    $i++;
} ?>

My css:

.row.gallery-row{
    height: 25%;
}

.gallery-image{
    height : 100%;
    overflow:hidden;
    display: table-cell;
    text-align: center;
}

The closest I get is with the CSS above: The images fit the height of the row and overflow is hidden. I still want the images to center and if the images are taller then wide they should prioritize fitting the width. Here is what the page looks like image

The bottom left picture has a woman on it but it doesn't show because it isn't centered.

Solution: I changed my css to :

.gallery-image{
    height : 100%;
    width : 100%;
    object-fit: cover;
}

My page now looks like this: image Adding some padding in between the rows will make it look just like facebook.

04FS
  • 5,660
  • 2
  • 10
  • 21
Niel Agneessens
  • 149
  • 1
  • 2
  • 8
  • I'm not sure if this can help you. try to add to gallery-image class {display:block;margin:0 auto} – Sfili_81 Jun 26 '19 at 09:53
  • This does center smaller images but doesn't center the bottom left one. – Niel Agneessens Jun 26 '19 at 10:01
  • i don't understand the problem for the image on the bottom left. Please provide us a fiddle so we can test your code – Sfili_81 Jun 26 '19 at 10:10
  • Here is the original image: https://mk0discoverbanfhesjg.kinstacdn.com/wp-content/uploads/2017/12/Banff-Gondola-View-in-the-Summer.jpg As you can see if the image was centered in his container we would be able to see the woman. What do you mean with a fiddle? How do I provide this? – Niel Agneessens Jun 26 '19 at 10:14

1 Answers1

0

Maybe adding object-fit in your .gallery-image css is what you want.

sodimel
  • 864
  • 2
  • 11
  • 24
  • Thank you, that was exactly what I was looking for. I changed my css to .gallery-image{ height : 100%; width : 100%; object-fit: cover; } My page now looks like this. https://imgur.com/a/EZ3xTtW – Niel Agneessens Jun 26 '19 at 10:25
  • 1
    it's ok to use it but remember this css property isn't supported by IE11 – Sfili_81 Jun 26 '19 at 10:27
  • Nice :) There are [a few](https://stackoverflow.com/a/37792830/6813732) [workarounds](https://stackoverflow.com/a/47450998/6813732) that work for ie11. – sodimel Jun 26 '19 at 11:41