css - 使用 css 的智能图像大小

Question

而不是我对我的问题进行疯狂的细节：主页在这里

如演示所示，当您调整窗口大小时，图像会尝试完美地保持在容器的中心，并在不显示背景的情况下适应容器。

我有一个小错误，如果您垂直调整窗口大小，它会通过挤压图像来破坏图像的比例。我想知道是否有人有任何技巧可以帮助解决这种情况，或者我是否需要检测与窗口高度与比例相比的图像大小？

我只是想避免使用 javascript 布局。