Question

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

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

背景图片：覆盖整个窗口而不影响宽高比，这意味着图片将始终触及窗口的两个相对边缘，但图像< strong>将被裁剪。
Forground Image ：在窗口内而不影响宽高比，这意味着图片将始终触摸窗口的两个相对边缘，但图像< strong>不会被裁剪。
无论是<div>还是<img>标记都无关紧要，只要它们显示的是图片。
还假设图像尺寸是预先知道的，可以在CSS或HTML部分中使用。

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

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

示例：

从顶部和底部裁剪背景图片时：
当背景图片从左右裁剪时：

Answer 1

在看了@Kent Brewster的answer之后，我想我可以达到OP的所有要求。

这不会出现前景图像被裁剪的问题，您还可以在前景图像周围指定恒定的边距。此外，还使用div代替img代码，因为我们使用的是背景图片。这是link，这是代码：

<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;
}

Answer 2

试试这个：

<html>
<style>
body {
  margin: 0;
}
#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent url(bg.jpg) 50% 50% no-repeat;
  background-size: cover;
}
#fg {
  position: absolute;
  height: 90%;
  width: 90%;
  top: 5%;
  left: 5%;
  background: transparent url(fg.jpg) 50% 50% no-repeat;
  background-size: cover;
  opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>

如果缩放要求很灵活，它可能会起作用。请参阅http://jsfiddle.net/k2h5b/5/以查看其运行情况。

Answer 3

是的，it's possible。

基本上我只是将背景图像作为<body>的背景（当然不一定是正文），然后将图像放在里面。

<body>
  <img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>

的CSS：

body {
  margin: 0; padding: 0;
  overflow: hidden;
  background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}

#fg {
  margin: 20px 20px;
  opacity: 0.7;
}

显然，如果窗口太大，就会出现问题。您可以（我猜）使用媒体查询根据窗口大小提取不同的图像大小。

编辑 - 好的，对于图像来说，如果你做希望它裁剪并保持正确的宽高比，那么我想你必须知道图像大小提前做到这一点，以便它成功。缺乏，here's another revision。

<body>
  <div id='fg'>&nbsp;</div>
</body>

的CSS：

body {
  margin: 0; padding: 0;
  overflow: hidden;
  background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}

body, html { width: 100%; height: 100%; }

#fg {
  margin: 2%; width: 96%; height: 96%;
  opacity: 0.7;
  background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}

如果您知道图像尺寸，则可以设置max-height和max-width。（我也会尝试： - ）

再次编辑要使背景以居中方式裁剪，您需要将位置设置为“居中”而不是“左上角”。（或者如果您只是希望它水平居中，则为“中心顶部”。）

使用CSS垂直居中的元素没有尖端的非标准功能（灵活的盒子布局）很难。这可能与JavaScript有关。我会说任何JavaScript解决方案的一个问题是它真的会降低浏览器的速度。如果你必须这样做，我会建议引入一点时间延迟，这样你就不会尝试重新计算每个 resize事件的布局。相反，在将来工作完成的时候设置一个200毫秒的计时器，每次这样做都取消之前的计时器。这样，当一个人拖动窗口角落时，它不会烧坏他们的CPU。

编辑更多哦哦是的@Kent布鲁斯特的答案与垂直居中是好的 - 我总是忘记这个伎俩： - ）

Answer 4

由于两个主要原因，无法仅使用CSS实现此效果：

由于您尝试调整图片大小，因此无法使用background属性，而必须使用<img>标记。如果未设置宽度和高度，您的图像将始终尽可能占用尽可能多的空间。因此，宽高比将无法保留，或者您的图像将被裁剪。
调整图片大小的另一个警告是，如果不知道其尺寸，您将无法将其垂直对齐到页面中心。

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

示例：

4 个答案: