是否可以在不使用JS的情况下实现这种灵活的布局？

Question

我可以在jsfiddle.net/k2h5b/上看到我在不使用JS的情况下实现的目标.

基本上我想显示两个图像,两个图像都居中,一个在背景中,一个在前景中:

• 背景图像:应覆盖整个窗口而不影响纵横比,这意味着图像将始终触摸窗口的两个相对边缘,但图像将被裁剪.
• Forground Image:应该在窗口内而不影响宽高比,这意味着图像将始终触摸窗口的两个相对边缘,但图像不会被裁剪.
• 只要它们显示图像,它是一个标签<div>还是一个<img>标签并不重要.
• 还假设图像大小是预先知道的,可以在CSS或HTML部分中使用.

所以我的问题是:是否可以只使用CSS或CSS3？

如果不可能,我会接受尽可能接近我的目标的答案.

例子:

• 当背景图像,从顶部和底部裁剪:

• 当背景图像从左右裁剪时:

Answer 1

在看了@Kent Brewster的答案之后,我想我可以达到OP的所有要求.

这没有前景图像被裁剪的问题,您还可以指定前景图像周围的恒定边距.也div正在使用而不是img标记,因为我们正在使用背景图像.这是链接,这里是代码:

<div id='bg'></div>
<div id='fg'></div>

#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(http://i.imgur.com/iOvxJ.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#fg {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  opacity: .7;
  background-image: url(http://i.imgur.com/HP9tp.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}