CODEWITHSUNDEEP
cssresponsive-design
chris
chris

Reputation: 71

Making responsive images with different aspect ratios the same height

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%;
}

Upvotes: 6

Views: 4021

Answers (3)

DCR
DCR

Reputation: 15657

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>

Upvotes: 0

Chigozie Orunta
Chigozie Orunta

Reputation: 438

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>

Upvotes: 0

Brian
Brian

Reputation: 4344

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.

Upvotes: -2

Related Questions