6

I'm trying to figure out a way to make a responsive row of images the same height, regardless of the aspect ratio of each image or the width of the container. The actual image files are the same height, but vary in width. The problem is that when the container gets smaller, at certain widths rounding errors cause images to be a pixel or two different in height. Here's a fiddle http://jsfiddle.net/chris_tsongas/vj2rfath/, resize the result pane and you'll see at some widths the images are no longer the same height.

I'm styling content from a CMS so have minimal control over the markup, and have a mandate to use css only rather than js. I tried setting the image height to 100% but that just makes the image 100% of its original size, not 100% of the container height. Here is the html and css from the fiddle linked above:

<div class="table">
    <div class="row">
        <div class="cell">
            <img src="http://placehold.it/600x400" />
        </div>
        <div class="cell">
            <img src="http://placehold.it/300x400" />
        </div>
    </div>
</div>

.table {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
img {
    max-width: 100%;
}
chris
  • 71
  • 1
  • 7
  • you could reduce this issue by vertical align the images to the top but then it still happens sometimes on the bottom of the first image - i tried to fix this for awhile and didn't found a solution – retober Oct 18 '14 at 10:04
  • @retober your idea of vertical align top led me to this workaround http://jsfiddle.net/5q96wpjt/. I did that and then added a pseudo-element underneath each cell that hides any height differences. Not sure if I should make this an answer. – chris Oct 20 '14 at 18:34
  • nice solution - if it answers your questions and solves your problem it is an answer. But on Chrome i still see some height differences sometimes. – retober Oct 21 '14 at 09:26

3 Answers3

0

To achieve same height for images with various aspect ratios, you can use the open source library bootstrap-spacer via NPM

npm install uniformimages

or you can visit the github page:

https://github.com/chigozieorunta/uniformimages

Here's an example of how this works using the "unim" class (you'd require jQuery for this):

<!DOCTYPE html>
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="uniformimages.css" rel="stylesheet" type="text/css"/>
      <script src="uniformimages.js" type="text/javascript"></script>
</head>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <a href="product1.html">
                        <img src="image1.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product2.html">
                        <img src="image2.jpg" class="unim"/>
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="product3.html">
                        <img src="image3.jpg" class="unim"/>
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

Chigozie Orunta
  • 448
  • 3
  • 13
0

use flex, it's made for this kind of thing.

.row {
    display: flex;
    justify-content:space-evenly;
}

img {
    max-width: 100%;
}
<div class="row">
        <div class="cell">
            <img src="http://placehold.it/600x400" />
        </div>
        <div class="cell">
            <img src="http://placehold.it/300x400" />
        </div>
    </div>
DCR
  • 14,737
  • 12
  • 52
  • 115
  • 1
    This doesn't work for me. I recommend not to be shy of using javascript and act according this question: https://stackoverflow.com/questions/60958533/equal-height-images-in-flexbox-with-unknown-aspect-ratio i. e. calculate the flex proberty based on the image's aspect ratio: https://jsfiddle.net/Sempervivum/q2sv813r/ – Sempervivum Jul 16 '21 at 19:16
-2

You want to style the image that is inside the cell, and constrain it to the cell size, so you need to change:

img { 
  max-width:100%
}

to

.cell img {
  height:50%;
  width:auto /* This keeps the aspect ratio correct */
}

Updated Fiddle

You can still do whatever you want to the table, but this will keep the images the same height.

Brian
  • 4,274
  • 2
  • 27
  • 55
  • 1
    Unfortunately in this case the images are no longer responsive, they are a fixed size (half of original height). – chris Oct 20 '14 at 18:32