我正在尝试仅使用CSS而不使用JavaScript，尽管这不是问题。
要求： 水平居中的图像，具有固定的宽高比（3：2）。图像本身没有3：2的宽高比，它更高，因此底部应该被裁剪。图像应该是流动的，始终与窗口一起缩放，无论是纵向还是横向。它具有最大宽度和高度，以便始终在屏幕上可见。
我已经成功完成了所有这些，虽然它似乎不是一个优雅的解决方案：它需要一个透明的png来强制纵横比，并使用background-image来显示图像本身。见这里：http://jsfiddle.net/fseixas/u4e4xx1f
现在我需要在这一个上面覆盖另一个div，我无法做到。有什么帮助吗？
（另外，如果您能为图像问题提供更优雅的解决方案，请执行！）
谢谢，
fseixas
答案 0 :(得分：1)
我已修改您的Fiddle，因此无需图片。我已经改变了几乎所有代码，但我基本上完成的是添加一个容器，其宽度始终为max-width: calc(100vw - 60px)，宽度为calc(150vh - 180px)（1.5倍）最大高度应该是什么，并考虑页眉，页脚和边距。）
然后我给了#imagem calc(100% / 1.5)的填充底部，这意味着它将获得与宽度完全相同的高度，但除以1.5（得到2:3的比率。
希望这能解决你的问题