首页 文章

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

提问于
浏览 次
282

我有

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

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

目前，Firefox看起来像是试图避免裁剪？我想垂直裁剪，然后滚动：没有水平重复 .

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

html css

10 回答

  • 681

    这有一个CSS3属性，即background-size（compatibility check） . 虽然可以设置长度值，但它通常与特殊值 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 */
}

    Eggsplanation包含和覆盖

    抱歉不好的双关语，但我打算用picture of the day by Biswarup Ganguly进行演示 . 让我们说这是你的屏幕，灰色区域在你的可见屏幕之外 . 为了演示，我将假设一个16x9的比例 .

    screen

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

    包含

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

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

    contain

    封面

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

    这可以确保背景图像覆盖所有内容 . 没有可见的 background-color ，但是根据屏幕的比例，图像的很大一部分可能会被切断：

    cover

    使用实际代码进行演示

    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>
    回复于
  • 1

    基于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;
}
    回复于
  • 11

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

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

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

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

    第一个回答了以下问题：

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

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

    希望这可以帮助 .

    回复于
  • 7

    试试这个，

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

    只需添加以下一行：

    .your-class {
        height: 100vh;
    }

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

    点击此处查看：Make div 100% height of browser window

    回复于
  • 29

    背景图像不是设置完美然后他的CSS是问题创建所以他的CSS文件更改为下面的代码

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

    ％; background-size：100％100％;“

    回复于
  • 3

    我遇到了同样的问题，在调整浏览器尺寸时无法调整图像大小 .

    坏代码：

    html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

    好代码：

    html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

    这里的关键是添加这个元素 - > background-size：contains;

    回复于
  • 6

    这对我有用：

    background-size: auto 100%;
    回复于
  • 2
    body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}
    回复于
  • 0

    设置背景大小没有帮助，以下解决方案对我有用：

    .class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

    它基本上裁剪图像并使其适应，但仍然没有使它适合 .

    回复于

相关问题