我正在尝试只使用CSS而不使用JavaScript，尽管这不会是一个问题。
要求:一个水平居中的图像，具有固定的长宽比(3:2)。图片本身没有3:2的宽高比，它比较高，所以应该裁剪底部。图像应该是流畅的，总是随窗口缩放，无论是纵向还是横向。它有一个最大宽度和高度，以便始终在屏幕上可见。
我已经设法做到了这一切，虽然它似乎不是一个优雅的解决方案:它需要一个透明的png来强制宽高比，并使用background-image来显示图像本身。详见:http://jsfiddle.net/fseixas/u4e4xx1f
现在我需要在这个div上叠加另一个div，但是我做不到。任何帮助吗?
(另外，如果你能提供一个更优雅的解决方案来解决图像问题，请提供!)
谢谢,
fseixas
我已经改变了你的小提琴，所以不需要图像。我已经改变了几乎所有的代码，但我基本上所做的，是添加一个容器，将始终具有max-width: calc(100vw - 60px)的完美宽度和calc(150vh - 180px)的宽度(1.5倍的最大高度应该是和占头，脚和边距)。
然后我给#imagem一个calc(100% / 1.5)的填充底部，这意味着它将得到完全相同的高度和宽度，但除以1.5(导致比例为2:3)。
希望这能解决你的问题