缩放不同宽度的图像以适合一行并保持相同的高度

Question

我有三个不同宽度的图像,但每个图像的高度相同.

我希望这些图像位于响应行中,这样这三个图像的组合宽度是屏幕宽度的100%,所有图像都具有相同的高度,每个图像保持其纵横比,并且图像不会被裁剪.

一种方法是根据每个图像的宽度根据其他图像为CSS中的每个图像设置不同的百分比宽度.但我对一种更聪明的方式感到好奇,可能使用JavaScript/jQuery,这样可以更有效地进行更大规模的此类事情.

Answer 1

这可以工作 - 通过使用CSS表格布局.

的jsfiddle

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
li {
  display: table-cell;
}
img {
  display: block;
  width: 100%;
  height: auto;
}

<ul>
  <li><img src="//dummyimage.com/100x100/aaa" /></li>
  <li><img src="//dummyimage.com/200x100/bbb" /></li>
  <li><img src="//dummyimage.com/300x100/ccc" /></li>
</ul>

Answer 2

如果源图像的高度不同，则必须使用 JavaScript。将所有图像设置为任意公共高度，并在该高度找到它们的组合宽度。然后通过乘以目标宽度与组合宽度的差值（以百分比形式）来增加高度：

$(window).on("load resize", function () { // wait for the images to complete loading
  $(".imgRow").each(function () {
    var row = $(this);
    var imgs = row.find("img");
    imgs.height(1000);
    var combinedWidth = imgs.get().reduce(function(sum, img) {
        return sum + img.clientWidth;
    }, 0);
    var diff = row.width() / combinedWidth;
    imgs.height(999 * diff); // 999 allows 1 px of wiggle room, in case it's too wide
  });
});

.imgRow {
  clear: left;
}
.imgRow img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgRow">
  <img src="//www.placecage.com/100/300" />
  <img src="//www.placecage.com/300/300" />
  <img src="//www.placecage.com/500/300" />
</div>
<div class="imgRow">
  <img src="//www.fillmurray.com/600/300" />
  <img src="//www.fillmurray.com/200/300" />
  <img src="//www.fillmurray.com/400/300" />
</div>
<div class="imgRow">
  <img src="//www.stevensegallery.com/500/300" />
  <img src="//www.stevensegallery.com/100/300" />
  <img src="//www.stevensegallery.com/300/300" />
</div>
<div class="imgRow">
  <img src="//www.placecage.com/400/300" />
  <img src="//www.placecage.com/600/300" />
  <img src="//www.placecage.com/250/300" />
</div>