Question

我正在寻找一个HTML-CSS唯一的解决方案（没有js），以获得适合其整个容器的背景图像，同时尊重其比例并居中。我希望结果与此处的结果类似：http://solemone.de/demos/fullsize-background-image-with-css3-background-size/但没有js

我之所以不想使用js是因为我在其他所有内容之后加载了js，并且我不希望用户在加载页面时看到不准确的背景显示。

Answer 1

这是我要做的。使用CSS3。 JSFiddle

<强> CSS3：

html { 
  background: url(path/to/image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

适用于现代浏览器，可随窗口大小缩放。

或仅使用CSS。 JSFiddle

<强> HTML：

<img src="http://wallpapersus.com/wp-content/uploads/2012/03/cityscapes-city-night-photography-long-exposure.jpg" class="bg" alt="">

<强> CSS：

img.bg 
{
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

它兼容旧版和现代版浏览器。也可以使用窗口大小。

注意：这些方法缩放图像的方式是保持图像的比例很好，以便看起来更好！

Answer 2

您可以使用

执行此操作

background: url("path/image.png") center center no-repeat;

背景的大小：

background-size: 200px 200px;

背景大小支持像素参数和％参数。

问候！

Answer 3

试试这个

body
{
    background:url(image.png) no-repeat 50% 50%;
    background-size:cover;
}

50% - 左侧的中心背景，第二个50% - 顶部的中心背景

contain - 按对象宽度和高度拟合图像，cover - 完全按对象w / h拟合图像。

CSS仅以正确比率为中心的全尺寸背景图像

3 个答案: