具有固定纵横比和裁剪的居中流体图像 - 2 个重叠的 div
Centered fluid image with fixed aspect ratio and cropping - 2 overlayed divs
我正在尝试仅使用 CSS 而没有使用 JavaScript，尽管这不是问题。
要求：
具有固定宽高比 (3:2) 的水平居中图像。图片本身没有 3:2 纵横比，它更高，所以应该裁剪底部。图像应该是流畅的，始终以 window 缩放，无论是纵向还是横向。它具有最大宽度和高度，以便始终在屏幕上可见。
我设法做到了这一切，尽管这似乎不是一个优雅的解决方案：它需要一个透明的 png 来强制显示纵横比，并使用 background-image 来显示图像本身。看这里：http://jsfiddle.net/fseixas/u4e4xx1f
现在我需要在这个上面叠加另一个 div，但我做不到。有帮助吗？
（另外，如果你能提供更优雅的图像问题解决方案，请提供！）
谢谢，
fseixas
我已经更改了您的 Fiddle，因此不需要图像。我已经更改了几乎所有代码，但我基本上所做的是添加一个容器，该容器始终具有 max-width: calc(100vw - 60px) 的完美宽度和 calc(150vh - 180px) 的宽度（最大宽度的 1.5 倍）高度应为页眉、页脚和边距）。
然后我给 #imagem 一个 calc(100% / 1.5) 的 padding-bottom，这意味着它将得到与宽度完全相同的高度，但除以 1.5（导致比率 2:3.
希望这能解决您的问题
我正在尝试仅使用 CSS 而没有使用 JavaScript，尽管这不是问题。
要求： 具有固定宽高比 (3:2) 的水平居中图像。图片本身没有 3:2 纵横比，它更高，所以应该裁剪底部。图像应该是流畅的，始终以 window 缩放，无论是纵向还是横向。它具有最大宽度和高度，以便始终在屏幕上可见。
我设法做到了这一切，尽管这似乎不是一个优雅的解决方案：它需要一个透明的 png 来强制显示纵横比，并使用 background-image 来显示图像本身。看这里：http://jsfiddle.net/fseixas/u4e4xx1f
现在我需要在这个上面叠加另一个 div，但我做不到。有帮助吗？
（另外，如果你能提供更优雅的图像问题解决方案，请提供！）
谢谢，
fseixas
我已经更改了您的 Fiddle，因此不需要图像。我已经更改了几乎所有代码，但我基本上所做的是添加一个容器，该容器始终具有 max-width: calc(100vw - 60px) 的完美宽度和 calc(150vh - 180px) 的宽度（最大宽度的 1.5 倍）高度应为页眉、页脚和边距）。
然后我给 #imagem 一个 calc(100% / 1.5) 的 padding-bottom，这意味着它将得到与宽度完全相同的高度，但除以 1.5（导致比率 2:3.
希望这能解决您的问题