Question

我有三张图片都是不同的宽度，但每张相同的高度。

我希望这些图像位于响应行中，这样这三个图像的组合宽度是屏幕宽度的100％，所有图像都有相同的高度，每个图像保持其纵横比，图像是没有裁剪。

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

Answer 1

这可以工作 - 使用css表格布局。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

$(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
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

Twitter Bootstrap（或任何体面的CSS框架）都有预先定义的特殊CSS类。

查看文档： http://getbootstrap.com/css/#grid

Answer 4

我的第一个方法是在容器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 5

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

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

您可能希望将此作为改进解决方案的基础：

https://jsfiddle.net/kb4gg35f/

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

(defun my-save-some-buffers ()
(interactive)
  (save-some-buffers 'no-confirm (lambda ()
    (cond
      ((and buffer-file-name (equal buffer-file-name abbrev-file-name)))
      ((and buffer-file-name (eq major-mode 'latex-mode)))
      ((and buffer-file-name (eq major-mode 'markdown-mode)))
      ((and buffer-file-name (eq major-mode 'emacs-lisp-mode)))
      ((and buffer-file-name (derived-mode-p 'org-mode)))))))

(global-set-key [f5] 'my-save-some-buffers)

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;
}

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

6 个答案: