问题

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

回答1:

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>

回答2:

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>

回答3:

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

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

来源：https://stackoverflow.com/questions/26434523/making-responsive-images-with-different-aspect-ratios-the-same-height

标签

css

responsive-design

Making responsive images with different aspect ratios the same height

问题

回答1:

回答2:

回答3:

Updated Fiddle