100% 宽度行中的不同尺寸图像答案

【问题标题】：Different sizes Images in a 100%-width-row100% 宽度行中的不同尺寸图像
【发布时间】：2020-03-23 06:36:13
【问题描述】：

我正在尝试将几张图像（五张）并排放置在一行中。该行的宽度应为 100%。重要的是图像都具有相同的高度，例如！有没有办法管理这个？我尝试了几个代码，例如砖石，但它对图像的高度没有帮助。

谢谢

（如果有帮助，我正在使用 Bootstrap。）

【问题讨论】：

你有一些代码可以在这里发布吗？
img{ height: 100px; width: auto; }?如果没有看到您的尝试，我们可以提供的东西不多。
其实没有，因为我做不到。我编辑了我的问题。图像栏的高度无关紧要。重要的是所有图像都以相同的高度显示。这些图像也有不同的纵横比。我会尝试在 Photoshop 中进行可视化。
@George 谢谢，但那行不通。我试图实现一个宽度为 100% 的图像栏。给我一秒钟。
我在我的问题中添加了一张图片。也许这有帮助。

标签： html css twitter-bootstrap image

【解决方案1】：

已编辑，新答案。

下面的代码应该可以完成这项工作。

请注意，我在 html 中的所有 img 标记之间插入了 cmets，这是为了确保图像之间没有间距，因此对于代码的工作很重要！

另请注意，如果您更改包含图像的 div 的类，则必须更改 javascript 中的查询选择器以匹配此内容。

最后说明：代码 sn-p 中的脚本非常滞后。我将它作为一个实际的网页进行了尝试，它一点也不卡顿，所以也许也试试吧！

var repeat = true;

window.addEventListener("load", resizeImages);
window.addEventListener("resize", resizeImages);

function resizeImages() {

  var i;

  var images = document.querySelectorAll("div.row img");

  var heights = [];
  var widths = [];

  for (i = 0; i < images.length; i++) {
    heights.push(images[i].offsetHeight);
    widths.push(images[i].offsetWidth);
  }

  var numerator = document.body.clientWidth;

  for (i = 0; i < heights.length; i++) {
    numerator *= heights[i];
  }

  var denominator = 0;

  for (i = 0; i < widths.length; i++) {

    var thisItem = widths[i];

    for (i2 = 0; i2 < heights.length; i2++) {

      if (i != i2) {
        thisItem *= heights[i2];
      }
    }

    denominator += thisItem;
  }

  var height = numerator / denominator;

  for (i = 0; i < images.length; i++) {
    images[i].height = height;
  }

  if (repeat) {
    repeat = false;
    setTimeout(function() {
      resizeImages();
    }, 300)


  }


}

div.row {
  white-space: nowrap;
}

<html>

<head>
  <title></title>
</head>

<body>



  <div class="row">
    <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" alt=""><!--
        --><img style="padding-left:5px;" src="https://jessehouwing.net/content/images/size/w600/2018/07/stackoverflow-1.png" alt=""><!--
        --><img src="http://www.andysowards.com/blog/assets/8-Best-Websites-That-Will-Hone-Your-Programming-Skills-7-1024x538.png" alt="">
  </div>




</body>

</html>

【讨论】：

谢谢，但我担心这会弄乱我的图像比例。我在我的问题中添加了一张图片。也许这有帮助。
@nwde 是的，我现在明白了。我看不出没有 javascript 是如何实现的，如果可以接受的话，我现在可以尝试一个新的解决方案？
我会很高兴的！
@nwde 我已经做到了！我的代码只是使用了一些随机图片，当你谷歌“stackoverflow”时，你可以用你自己的图片替换它们。
请问您是否希望我解释 javascript 的任何部分 :)

【解决方案2】：

我为您的实现使用了 CSS Grid。 .row 是 100% 宽度，如果需要，每个图像都可以有自己的自定义缩放。

请注意，图像很难保持不变，因为每张图像都有自己的比例和大小。您可以使用background-size 来设置您喜欢的图像属性。

background-size CSS 属性设置元素背景图像的大小。图像可以保留其自然大小、拉伸或限制以适应可用空间。

希望下面的示例有所帮助。

参考background-size：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

参考CSS Grid：https://css-tricks.com/snippets/css/complete-guide-grid/

img {
     height: 130px;
     width: 100%;
}

.row{  
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(5, 1fr);
 /* If each individual picture column need modification*/
 /* grid-template-columns: auto 1fr 200px 15px 10%; */
}

<div class="row">
  <img src="https://loremflickr.com/cache/resized/8447_7961096220_79eb4fb07c_c_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/65535_40670884373_757596f5d1_b_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/65535_47957578362_73f1562d77_z_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/65535_46970967485_3456a6be5f_z_640_360_nofilter.jpg" alt="">
  <img src="https://loremflickr.com/cache/resized/2544_3722368834_5584ab3bc1_z_640_360_nofilter.jpg" alt="">
</div>

【讨论】：

图片被压扁了。
图像会根据屏幕尺寸做出反应，除非应用了特定的宽度和高度。
我的意思是，无论图像的原始格式如何，它们都已调整大小以适应正方形，从而挤压图像。请参阅我的答案以获得可能的 javascript 解决方案。
@Run_Script 有趣的方法。如果这个人只使用 CSS，他们需要将图像放在一个块中。然后可以修改每个块，或者一行中的每个块都可以具有相同的属性。问题本身并不清楚这种方法。