Html 100%宽度行中的不同大小图像

我试图把几个图像（五个）放在一行中彼此相邻。该行的宽度应为100%。重要的是，所有图像都具有相同的高度，例如。！有没有办法处理这个问题？我尝试了几种代码，例如砖石，但它对图像的高度没有帮助

多谢各位

---

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

编辑，新答案。

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

请注意，我在html中的所有

img

标记之间插入了注释，这是为了确保图像之间没有间隔，因此对于代码的工作非常重要

还请注意，如果更改包含图像的

div

类，则必须更改javascript中的查询选择器以匹配该类

最后一点注意：代码片段中的脚本非常滞后。我试着把它作为一个真实的网页，它一点也不落后，所以也许也可以试一下

var repeat=true；
window.addEventListener（“加载”，调整图像大小）；
addEventListener（“调整大小”，调整图像大小）；
函数resizeImages（）{
var i；
var images=document.queryselectoral（“div.row img”）；
var高度=[]；
风险值宽度=[]；
对于（i=0；i

div.row{
空白：nowrap；
}

---

我在您的实现中使用了CSS网格

.row

是100%宽度，如果需要，每个图像可以有自己的自定义缩放

请注意，图像很难保持不变，因为每个图像都有自己的比例和大小。 您可以使用

background size

根据自己的喜好设置图像属性

background size

CSS属性设置元素背景图像的大小。可以将图像保留为其自然大小、拉伸或约束以适合可用空间

希望下面的例子能有所帮助

参考

背景尺寸

：

参考

CSS网格

：

img{
高度：130像素；
宽度：100%；
}
.第{
宽度：100%；
显示：网格；
网格模板行：自动；
网格模板列：重复（5，1fr）；
/*如果每个单独的图片列需要修改*/
/*网格模板列：自动1fr 200px 15px 10%*/
}

你有一些可以发布在这里的代码吗？

img{height:100px；width:auto；}

？没有看到你的努力，我们没有更多的东西可以提供。事实上没有，因为我做不到。我编辑了我的问题。图像栏的高度与此无关。重要的是，所有图像都显示在同一高度。这些图像也有不同的纵横比。“我会尝试在Photoshop中可视化。”乔治，谢谢，但那不行。我正在尝试实现一个宽度为100%的图像条。给我一点时间。我在我的问题上加了一个图片。也许会有帮助。谢谢，但我担心这会弄乱我的图片比例。我在问题中添加了一个图像。也许这会有帮助。@nwde是的，我现在明白了。如果没有javascript，我看不出这是如何实现的，如果可以接受的话，我现在可以尝试一个新的解决方案吗？我将非常高兴@我现在已经做了！我的代码只是使用谷歌“stackoverflow”时出现的一些随机图像，你可以随意用自己的图像替换它们。请询问是否需要我解释javascript的任何部分：）图像已被压缩。图像将根据屏幕大小做出反应，除非应用了一定的宽度和高度。我的意思是，无论图像的原始格式如何，它们都已调整大小以适合正方形，从而挤压图像。请参阅我的答案，了解可能的javascript解决方案。@Run\u脚本有趣的方法。如果此人仅使用CSS，则需要将图像放入块中。然后可以修改每个块，或者一行中的每个块都可以具有相同的特性。这个问题本身并不清楚。