縮放不同寬度的圖像以適合一行並保持相同的高度

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