CSS背景图像适合宽度,高度应按比例自动缩放

Question

我有

body {
    background: url(images/background.svg);
}

期望的效果是该背景图像的宽度等于页面的宽度,高度变化以保持比例.例如,如果原始图像恰好是100*200(任何单位)且正文宽度为600px,则背景图像最终应为1200px高.如果调整窗口大小,高度应自动更改.这可能吗？

目前,Firefox看起来正在调整高度,然后调整宽度.这可能是因为高度是最长的尺寸而且它试图避免裁剪？我想垂直裁剪,然后滚动:没有水平重复.

此外,Chrome将图像置于中心,不重复,即使background-repeat:repeat明确给出,这仍然是默认值.

Answer 1

这有一个CSS3属性,即background-size(兼容性检查).尽管人们可以设置长度值,它通常是用特殊值使用contain和cover.在您的具体情况下,您应该使用cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eggplanation for contain和cover

对不起的双关语感到抱歉,但我将使用Biswarup Ganguly当天的照片进行演示.让我们说这是你的屏幕,灰色区域在你的可见屏幕之外.为了演示,我将假设16x9比率.

我们想用上面提到的图片作为背景.但是,出于某种原因,我们将图像裁剪为4x3.我们可以将background-size属性设置为某个固定长度,但我们将重点关注contain和cover.请注意,我还假设我们没有破坏宽度和/或高度body.

contain

contain

缩放图像,同时保持其固有的纵横比(如果有的话)到最大尺寸,使得其宽度和高度都可以适合背景定位区域.

这样可以确保背景图像始终完全包含在背景定位区域中,但是,background-color在这种情况下,可能会有一些空白空间:

cover

cover

缩放图像,同时保持其固有的纵横比(如果有的话)到最小尺寸,使得其宽度和高度都可以完全覆盖背景定位区域.

这可以确保背景图像覆盖所有内容.将无法看到 background-color,但根据屏幕的比例,您的图像很大一部分可能会被切断:

用实际代码演示

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Answer 2

基于来自https://developer.mozilla.org/en-US/docs/CSS/background-size的提示,我最终得到了以下对我有用的配方

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Answer 3

我不确定你到底在寻找什么,但你真的应该看看这些由Chris Coyier写的CSS-Tricks的优秀博客文章:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

阅读每篇文章的描述,看看它们是否符合您的要求.

第一个回答了以下问题:

有没有办法使背景图像可调整大小？同样,无论浏览器窗口的大小如何,都要用图像填充网页边缘到边缘的背景.此外,随着浏览器窗口的更改,请将其调整为更大或更小.此外,确保它保持其比例(不会拉伸怪异).此外,不会导致滚动条,只是在需要时垂直切断.此外,在页面上作为内联标记.

第二篇文章的目标是获得以下内容,"网站上的背景图像始终覆盖整个浏览器窗口."

希望这可以帮助.

Answer 4

试试这个,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Answer 5

只需添加以下一行:

    .your-class {
        height: 100vh;
    }

vh是视口高度.这将自动缩放以适合设备的浏览器窗口.

在这里查看更多:使div为浏览器窗口的100%高度

Answer 6

背景图片未设置为完美，则他的css创建问题，因此他的css文件更改为以下代码

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

％; 背景大小：100％100％；”

Answer 7

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}