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

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

您可能希望以此为基础来完善解决方案：

https://jsfiddle.net/kb4gg35f/

由于某种原因，这不能用作 sn-p。不过，它就像一个小提琴。

var images = $('img');
var accumulatedWidth = 0;
var widthResizeFactor;
var screenWidth = $('div').width();
var originalSizeArray = [];
$(document).ready(function() {
  for (var i = 0; i < images.length; i++) {
    var theImage = new Image();
    theImage.src = images[i].src;
    accumulatedWidth += theImage.width;
    originalSizeArray.push(theImage.width);
  }
  widthResizeFactor = screenWidth / accumulatedWidth;
  for (var i = 0; i < images.length; i++) {
    images[i].width = originalSizeArray[i] * widthResizeFactor;
  }
});

body {
  margin: 0;
}
div:after {
  content: "";
  display: table;
  clear: left;
}
img {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <img src="http://lorempixel.com/100/200" />
  <img src="http://lorempixel.com/200/200" />
  <img src="http://lorempixel.com/400/200" />
</div>

Answer 3

如果源图像的高度不同，则必须使用 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="http://placecage.com/100/300" />
  <img src="http://placecage.com/300/300" />
  <img src="http://placecage.com/500/300" />
</div>
<div class="imgRow">
  <img src="http://fillmurray.com/600/300" />
  <img src="http://fillmurray.com/200/300" />
  <img src="http://fillmurray.com/400/300" />
</div>
<div class="imgRow">
  <img src="http://nicenicejpg.com/500/300" />
  <img src="http://nicenicejpg.com/100/300" />
  <img src="http://nicenicejpg.com/300/300" />
</div>
<div class="imgRow">
  <img src="http://placesheen.com/400/300" />
  <img src="http://placesheen.com/600/300" />
  <img src="http://placesheen.com/250/300" />
</div>

Answer 4

我要采取的方法的要点是弄清楚你的框架有多大，并弄清楚你的 imgs 的总和有多大。然后，使用这些总数的比率，调整每个图像的大小。

$(document).ready(function(){
var frameWidth = $("div.imgs").width()
var totalImgWidths = $("img#img1").width() + $("img#img2").width() + $("img#img3").width()
var ratio = frameWidth / totalImgWidths
var fudge = .95

$("img#img1").width(Math.floor($("img#img1").width() * ratio * fudge) )
$("img#img2").width(Math.floor($("img#img2").width() * ratio * fudge) )
$("img#img3").width(Math.floor($("img#img3").width() * ratio * fudge) )
})

快速查看plunker 我很快就写了。它并不花哨，而且它使用了一些软糖因素，所以如果有人可以改进它，我很高兴。

Answer 5

我的第一个方法是在一个容器 div 中创建三个 div。将 33.33% 的高度和宽度分配给这三个（以及一个 float:left;）和 100% 的宽度给容器。然后将您的三个图像设置为具有正确背景属性的这三个 div 的背景，例如

background-size:cover;

它可能会根据屏幕的宽度截断您的图像，但我认为您无法使用尺寸不完全相同的图像来解决这个问题。

HTML

<div class="container">
   <div class="image" style="background-image: url('/image.jpg');">
   </div>
   <div class="image" style="background-image: url('/image.jpg');">
   </div>
   <div class="image" style="background-image: url('/image.jpg');">
   </div>
</div>

CSS

.container{
   width:100%;
}
.image{
   float:left;
   width:33.33%;
   background-size:cover;
   background-repeat: no-repeat;
}