Question

我一直在阅读相关的答案，但根本无法让它发挥作用。我想我会提供一个完整的例子，希望我能得到一个适合我的答案。

我有这张图片，bckg.png，尺寸1200x1920，使用Imagemagick convert -size 1200x1920 gradient:tomato-steelblue -distort SRT 60 bckg.png创建（点击查看完整尺寸）：

我希望它显示在浏览器窗口的中心，以便根据浏览器窗口的较小尺寸进行缩放，从而保留纵横比。

_{例如，如果可用的浏览器窗口页面区域是887x487，则较小的尺寸是高度 - 所以我希望图像高度缩放到487px，并保留纵横比，然后它的宽度将是是487 *（1200/1920）≈305px}

所以，我尝试使用以下代码temp.htm：

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
html,body { height:100%; }
/* convert -size 1200x1920 gradient:tomato-steelblue -distort SRT 60 bckg.png */
#background {
  background: url(bckg.png) no-repeat center center fixed;
  background-size: cover;
  height:100%;
}
  </style>
</head>

<body>

<div id="background">
</div>

</body>
</html>

在Firefox 42中，这呈现为：

但是，我本想要的，应该看起来像这样（我在图像编辑器中对其进行了修改）：

...基本上，无论我如何调整浏览器窗口的大小，整个图像都应该显示在其中心，居中。

如何使用HTML / CSS执行此操作？（pre-css3答案也很受欢迎）

Answer 1

只需将background-size切换为contain，而不是cover JS Fiddle

#background {
    background-size: contain;

** 请注意如果你想摆脱页面顶部，右侧，底部和左侧的几个白色像素边距，请将其添加到body css：< / p>

    padding:0;
    margin:0;

Answer 2

我更喜欢这个：

html, body {
    height:100%;
    padding:0;
    margin:0;
}
 #background {
    background: url('http://i.stack.imgur.com/8H1yb.png') no-repeat center center;
     background-size: auto 100%;
     height:100%;
}

为了获得更大的兼容性宽度IE（我没有测试旧版本但它应该是7+，可能是6 +）

http://jsfiddle.net/sqdkyaot/4/

整页div，适合较小尺寸的图像（保留纵横比）？

2 个答案: