Html 如何使旋转木马内的横向和纵向图像完全响应且高度相同？

我有一个引导转盘，里面有肖像和风景图片。（宽屏幕）

正如您在上面看到的，每个图像都有不同的大小。旋转木马高度自动设置为最高图像的高度。这种行为不是我想要的，因为在这种情况下，当我缩小窗口时，图像的顶部和底部都有空白，如下所示（移动屏幕） 为了避免图像周围出现这些间隙，我认为所有图像的高度都应该相同，旋转木马的高度应该设置为图像的最低高度，而不是最高高度。但我不知道如何做到这一点

所需状态（宽和移动）

引导示例
/*使图像完全响应*/
.旋转木马内部img{
宽度：100%；
身高：100%；
}
分组传送带项目{
背景尺寸：包含；
背景位置：中心；
背景重复：不重复不重复；
宽度：100%；
身高：100%；
}

我运行了您的代码，但没有显示任何内容，因此我在每个

旋转木马项目中创建了一个新的div

，并对其应用了一些CSS样式以满足您的要求。但是对于窄图像，我只使用了

img

标记

这是你想要的吗

.att2{
背景尺寸：封面；
高度：400px；
宽度：自动；
背景重复：无重复；
背景位置：50%50%；
}

文件

您是否已经尝试过将图像包装在div类中，并使用类似于

contain

的

对象拟合

类？是的，但没有工作如果所有图像的高度都相同，您希望对太宽而无法使用可用宽度的图像发生什么情况？它们应该只在左右两侧裁剪吗？为什么不使用固定的像素宽度和高度？@AHaworth正如我在“理想状态”中提到的，太宽的图像应该和肖像图像一样小，以保持高度相同。请在整页模式下查看片段以正确查看结果