Масштабируйте изображения различной ширины, чтобы они соответствовали строке и поддерживали равную высоту

У меня есть три изображения, все разные ширины, но каждая одинаковая высота.

Я хочу, чтобы эти изображения находились в чувствительной строке, чтобы объединенная ширина этих трех изображений была на 100% шириной экрана, все изображения имеют равную высоту, каждое изображение поддерживает его соотношение сторон, а изображения не обрезано.

Один из способов сделать это - установить разную процентную ширину для каждого изображения в CSS, основываясь на каждой ширине изображения в соответствии с другими. Но мне интересно узнать более разумный способ, возможно, используя JavaScript/jQuery, что было бы более эффективно для этого типа вещей в более широком масштабе.

Ответ 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>

Ответ 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 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>

Ответ 3

Twitter Bootstrap (или любая достойная структура CSS) имеет специальный CSS-класс, предварительно определенный, кто это делает.

См. документ: http://getbootstrap.com/css/#grid

Ответ 4

Моим первым подходом к этому было бы создать три div в контейнере div. Назначьте высоту и ширину 33,33% каждой из трех (и поплавок: слева;) и 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;
}

Ответ 5

Суть подхода, который я возьму, - это выяснить, насколько велика ваша рамка, и выяснить, насколько широка сумма ваших img. Затем, используя соотношение этих итогов, измените размер каждого изображения.

$(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 Я быстро написал. Это не фантазия, и она использует немного фактор выдумки, поэтому я рад, если кто-то может улучшить ее.

Ответ 6

Возможно, вы захотите использовать эту базу для уточнения решения:

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>