填充容器宽度的等高图像网格

Question

这是我想要实现的目标：

• 1 行，里面有 3 张图片。
• 1 行，里面有 2 张图片。

如何使 100%-width-container 中的图像具有相同的高度？

所有图片都没有一致的宽度和高度。 我需要图像来保持它们的裁剪和纵横比。 它们不需要具有相同的宽度。

到目前为止，这是我使用 flex-box 取得的成果。但它们的高度不同。我不介意使用 JavaScript 来解决这个问题。

我宁愿不为容器或图像设置高度值。 有没有办法让图像在具有相同高度的同时均匀分布？

.wrapper {
  width:100vw; /*should be width of browser*/
  display:flex;
  margin:0;
  padding:0;
  margin:0;
  border:1px solid;
}

.image {
  list-style:none;
  margin: 50px 1.5%;
}
.image:first-child {
  margin-left:0;
}
.image:last-child {
  margin-right:0;
}
img {
  width:100%
}

<ul class="wrapper three_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
  <li class="image"><img src="http://lorempixel.com/550/700/"></li>
</ul>



<ul class="wrapper two_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
</ul>

Answer 1

这是一个使用 jQuery 的解决方案：

$(".wrapper").each(function () {
  /** Push all images size in an array **/
  let imagesSize = [];
  $(this)
    .find("img")
    .each(function () {
      let imgWidth = $(this).width();
      let imgHeight = $(this).height();
      imagesSize.push([imgWidth, imgHeight]);
    });

  /** Assign the same height to all the images **/
  let newImagesSize = [];
  let totalWidth = 0;
  let referenceHeight = imagesSize[0][1];

  imagesSize.forEach(function (imageSize, index) {
    let heightRatio = referenceHeight / imageSize[1];
    let newImgWidth = imageSize[0] * heightRatio;
    let newImgHeight = imageSize[1] * heightRatio;
    newImagesSize.push([newImgWidth, newImgHeight]);
    totalWidth += newImgWidth;
  });

  /** Get the total width of all the images, the width of the wrapper and addapt the width/height of each images **/
  let wrapperWidth = $(this).width();
  let widthRatio = wrapperWidth / totalWidth;

  $(this)
    .find("img")
    .each(function (index, el) {
      let imgWidth = newImagesSize[index][0] * widthRatio;
      let imgHeight = newImagesSize[index][1] * widthRatio;
      $(this).css({ width: imgWidth, height: imgHeight });
    });
});

$(document).ready(function () {
  $(".wrapper").each(function (index, el) {
    /** Push all images size in an array **/
    let imagesSize = [];
    $(this)
      .find("img")
      .each(function () {
        let imgWidth = $(this).width();
        let imgHeight = $(this).height();
        imagesSize.push([imgWidth, imgHeight]);
      });

    /** Assign the same height to all the images **/
    let newImagesSize = [];
    let totalWidth = 0;
    let referenceHeight = imagesSize[0][1];

    imagesSize.forEach(function (imageSize, index) {
      let heightRatio = referenceHeight / imageSize[1];
      let newImgWidth = imageSize[0] * heightRatio;
      let newImgHeight = imageSize[1] * heightRatio;
      newImagesSize.push([newImgWidth, newImgHeight]);
      totalWidth += newImgWidth;
    });

    /** Get the total width of all the images, the width of the wrapper and addapt the width/height of each images **/
    let wrapperWidth = $(this).width();
    let widthRatio = wrapperWidth / totalWidth;

    $(this)
      .find("img")
      .each(function (index, el) {
        let imgWidth = newImagesSize[index][0] * widthRatio;
        let imgHeight = newImagesSize[index][1] * widthRatio;
        $(this).css({ width: imgWidth, height: imgHeight });
      });
  });
});

.image {
  float: left;
}

li {
  list-style-type:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="wrapper three_images">
  <li class="image"><img src="https://via.placeholder.com/300x750.jpeg/FFFF00"></li>
  <li class="image"><img src="https://via.placeholder.com/400x300.jpeg/0000FF"></li>
  <li class="image"><img src="https://via.placeholder.com/500x550.jpeg/FF0000"></li>
</ul>



<ul class="wrapper two_images">
  <li class="image"><img src="https://via.placeholder.com/600x800.jpeg/808080"></li>
  <li class="image"><img src="https://via.placeholder.com/400x850.jpeg/dddddd"></li>
</ul>

Answer 2

您可以在两个轴上使用 object-fit 和尺寸 img ，它会自行裁剪：

您也可以使用 object-position、image-orientation、image-rendering 进行调整

img {
  width:100%;
  height:100%;
  object-fit: cover;
}

.wrapper {
  width:100vw; /*should be width of browser*/
  display:flex;
  margin:0;
  padding:0;
  margin:0;
  border:1px solid;
}
body {margin:0;}

.image {
  list-style:none;
  margin: 50px 1.5%;
}
.image:first-child {
  margin-left:0;
}
.image:last-child {
  margin-right:0;
}
img {
  width:100%;
  height:100%;
  object-fit: cover;
}

<ul class="wrapper three_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
  <li class="image"><img src="http://lorempixel.com/550/700/"></li>
</ul>



<ul class="wrapper two_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
</ul>

见：https://caniuse.com/object-fit

它的工作方式基本上就像在背景中设置图像并通过背景大小，背景位置调整大小，但只有相似，行为和语义不同:(

Answer 3

.wrapper {
  width:100vw; /*should be width of browser*/
  display:flex;
  margin:0;
  padding:0;
  margin:0;
  border:1px solid;
}

.image {
  list-style:none;
  margin: 50px 1.5%;
  height: 100px; /* SET THIS */
  overflow: hidden;
}
.image:first-child {
  margin-left:0;
}
.image:last-child {
  margin-right:0;
}
img {
  width:100%
  height: 100%;
}

试试这个。只需将 .image 高度值设置为您觉得合适的任何值。