Updated Fiddle

Question

无论每张图片的宽高比或容器的宽度如何，我都试图想出一种方法来使响应的图像行具有相同的高度。实际图像文件的高度相同，但宽度不同。问题是当容器变小时，在某些宽度下，舍入误差会导致图像为高度不同的像素或两个像素。这是一个小提琴http://jsfiddle.net/chris_tsongas/vj2rfath/，调整结果窗格的大小，你会看到一些宽度，图像不再是相同的高度。

我正在设计来自CMS的内容，因此对标记的控制很少，并且只能使用css而不是js。我尝试将图像高度设置为100％，但这只会使图像达到其原始尺寸的100％，而不是容器高度的100％。这是上面链接的小提琴的html和css：

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

Answer 1

要使各种宽高比的图像达到相同的高度，可以通过NPM使用开源库bootstrap-spacer

npm install uniformimages

或者您可以访问github页面：

https://github.com/chigozieorunta/uniformimages

这是一个使用“ unim”类的工作方式示例（为此您需要jQuery）：

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

Answer 2

使用flex，它是为这种事情而制作的。

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

Answer 3

您希望为单元格内的图像设置样式，并将其约束为单元格大小，因此您需要更改：

img { 
  max-width:100%
}

到

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

Updated Fiddle

你仍然可以对表格做任何你想做的事情，但这会使图像保持相同的高度。

使具有不同宽高比的响应图像具有相同的高度

3 个答案:

Updated Fiddle