Html 我如何制作横跨网站宽度的3幅图像？

所以我想在网站的整个宽度上有3张图片，每一张都是1/3。我希望他们能够在不同的屏幕尺寸上做出相应的响应和缩放，并让他们保持纵横比，有什么想法吗

到目前为止，我已经做到了这一点，但是当网站缩小时，它们会非常不自然地缩小

以下是迄今为止的代码：

#内容{
高度：自动；
宽度：100%；
字体大小：0px；
显示器：flex；
}
.图像{
宽度：33.33%；
高度：800px；
}

---

将它们放在容器元素中，并将图像设置为

宽度：100%

或

最大宽度：100%

#内容{
高度：自动；
宽度：100%；
字体大小：0px；
显示器：flex；
}
.图像{
宽度：100%；
}

---

你就快到了，将图像包装成一个

div

然后将那些div

弹性基础设置为三分之一，你可以使用
calc（）
并将
（最大-）宽度：100%
设置为
img
s

编辑-OP的评论

这是可行的，但是图像的高度是混乱的，所有不同的高度，而不是与页脚齐平。我该如何修理这个机器
高度也一样

由于图像具有不同的比例大小，因此必须将
display:flex
添加到
div


正文{
保证金：0
}
#内容{
高度：自动；
宽度：100%；
显示器：flex；
}
#内容>分区{
弹性：0计算（100%/3）；
显示器：flex；
/*演示*/
框大小：边框框；
边框：2件纯红
}
img{
宽度：100%；
显示：块
}

这是可行的，但是图像的高度混乱，所有不同的高度都与页脚不齐平。我该如何确定高度呢？想给我一个例子，说明你拥有什么以及你对当前图像的要求吗？基本上，我有图像的原始大小，不会降低质量，因此高度略有不同。我将该网站上传到github页面，向您展示了正在发生的事情：我希望它像这样被刷新到页脚：为此，删除
flex:0 calc（100%/3）
确实解决了这个问题，但现在第一个图像比其他两个图像宽，因此图像不再是1/3