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

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="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 3

我的第一个方法是在容器div中创建三个div。 为容器中的每一个（以及浮点数：左;）和100％宽度分配高度和宽度33.33％。 然后将三个图像设置为具有正确背景属性的三个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;
}

Answer 4

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

$(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

您可能希望使用此基础来优化解决方案：

https://jsfiddle.net/kb4gg35f/

出于某种原因，这不能作为一个片段。 不过，它可以作为一个小提琴。

 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 6

Twitter Bootstrap（或任何体面的CSS框架）都有预先定义的特殊CSS类，他们这样做。

请参阅doc： http ： //getbootstrap.com/css/#grid