Css 响应居中图像：垂直调整大小-未调整

我以为我已经弄清楚了怎么做，但我想我还是没有做到。我试图用最少的css来实现这一点

图像居中，如果水平或对角调整窗口大小，并强调水平，则一切都很好

但如果只是垂直调整大小，图像大小将保持在其标称高度，并添加滚动条

我尝试了各种组合的最大高度，最大宽度，高度和宽度，但似乎没有解决它

我的图像将在最大1024px的宽度和最大768px的高度之间有各种尺寸

我的努力可以在网站上看到

灯箱{ 背景：浅蓝色； 填充：0px； 位置：绝对位置； 左：0； 排名：0； 身高：100%； 宽度：100%； } 滑梯{ 背景：ffdb4c； /*高度：300px*/ 位置：相对位置； 最高：50%； -webkit转换：translateY-50%； -moz变换：translateY-50%； -ms转换：translateY-50%； -o-转换：translateY-50%； 转化：translateY-50%； } img{ 最大宽度：800px； 最大高度：600px； 显示：块； 保证金：自动； } 标记：

---

这些场景中棘手的部分是，最大宽度和高度必须是动态的，因为它们可以很容易地适应不同的视口方向。如果交叉浏览器兼容性不是主要问题，则可以分别使用vmax和vmin单位进行图像最大尺寸测量，以强制图像遵守视口边界，而不考虑视口方向

此技巧仅在以下情况下有效：

浏览器支持视口单元是可用的-你可能不得不考虑回退那些不 灯箱容器具有相对于视口大小的垂直和水平尺寸。 灯箱{ 背景：浅蓝色； 填充：0px； 位置：绝对位置； 左：0； 排名：0； 身高：100%； 宽度：100%； } 滑梯{ 背景：ffdb4c； /*高度：300px*/ 位置：相对位置； 最高：50%； -webkit转换：translateY-50%； -moz变换：translateY-50%； -ms转换：translateY-50%； -o-转换：translateY-50%； 转化：translateY-50%； } img{ 最大宽度：80V最大； 最大高度：80vmin； 显示：块； 保证金：自动； }

---

幻灯片需要高度：100%，img需要最大高度：100%。现在，调整尺寸只在垂直方向有效，而不是水平方向，垂直中心已消失。