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

HTML CSS

Mandy

2020-03-22

我有

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

所需的效果是此背景图像的宽度将等于页面的宽度，并更改高度以保持比例。例如，如果原始图像恰好是100 * 200（任何单位）并且主体为600px宽，则背景图像最终应为1200px高。如果调整窗口大小，则高度应自动更改。这可能吗？

目前，Firefox看起来像是调整高度，然后调整宽度。这可能是因为高度是最长的尺寸，并且它正在尝试避免裁切吗？我想垂直裁剪，然后滚动：无水平重复。

另外，Chrome会将图像放置在中间，即使background-repeat:repeat是明确指定，也不会重复，这仍然是默认设置。

第2563篇《CSS背景图片要适合宽度，高度应按比例自动缩放》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
达蒙LEY 2020.03.22

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

错误代码：

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：

番长樱梅 2020.03.22

这对我有用： 

background-size: auto 100%;
蛋蛋飞云 2020.03.22

只需添加这一行：

    .your-class {
        height: 100vh;
    }

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

在此处查看更多信息：将div设置为浏览器窗口高度的100％

Stafan小哥 2020.03.22

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

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

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

逆天小卤蛋 2020.03.22

尝试这个，

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

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

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

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

阅读每篇文章的描述，看看它们是否正是您所需要的。

第一个回答以下问题：

有没有办法使背景图像可调整大小？如图所示，无论浏览器窗口的大小如何，都用图像将网页的背景填满。另外，随着浏览器窗口的更改，将其大小调整为更大或更小。另外，请确保它保持其比例（不要拉伸怪异）。另外，不会引起滚动条，只是在需要时才垂直切掉。另外，作为内嵌标签进入页面。

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

希望这可以帮助。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android