html - 具有固定纵横比和裁剪的居中流体图像 - 2 个重叠的 div

Question

我正在尝试只使用 CSS 而不使用 JavaScript，尽管这不是问题。

要求:具有固定宽高比 (3:2) 的水平居中图像。图片本身没有 3:2 的纵横比，它更高，所以应该裁剪底部。图像应该是流畅的，始终随窗口缩放，无论是纵向还是横向。它具有最大宽度和高度，以便始终在屏幕上可见。

我设法做到了这一切，虽然它看起来不是一个优雅的解决方案:它需要一个透明的 png 来强制纵横比，并使用 background-image 来显示图像本身。看这里:http://jsfiddle.net/fseixas/u4e4xx1f

现在我需要在这个 div 之上叠加另一个 div，但我做不到。有帮助吗？

(另外，如果你能为图像问题提供更优雅的解决方案，请提供!)

谢谢，
弗塞克斯

Answer 1

我已经修改了你的 Fiddle这样就不需要图像了。我已经更改了几乎所有代码，但我基本上所做的是添加一个容器，该容器始终具有完美宽度 max-width: calc(100vw - 60px) 和宽度calc(150vh - 180px)(应为最大高度的 1.5 倍，并考虑页眉、页脚和边距)。

然后我给 #imagem 一个 calc(100%/1.5) 的 padding-bottom，这意味着它将获得与宽度完全相同的高度，但除以1.5(导致比率为 2:3。

希望这能解决你的问题