Question

我试图让我的身体背景图像缩放到全分辨率，即使窗口被固定在我的屏幕左侧的窗口，它是1080p图片，这是我的意思的一个例子。

完整窗口大小

http://gyazo.com/4c2ffe00930d09cec27404ecccdeec18

缩放窗口大小

http://gyazo.com/d5afdbdf43ef1a06ab1d52df6ce956b7

继承人我的身体css

body {
    margin: 0px;
    padding: 0px;
    background: url('Images/background.png') #A98436 no-repeat left top;
    background-size: 100%;
    font-family: 'ubuntu', 'Open Sans', sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
}

Answer 1

您可以将其设置为background-size: cover cover;

<强> Demo

body {
    min-width: 100%;
    margin: 0px;
    padding: 0px;
    background-image: url('http://i.gyazo.com/4c2ffe00930d09cec27404ecccdeec18.jpg');
    background-repeat: no-repeat;
    background-size: cover cover;
    overflow-x: hidden;
    overflow-y: hidden;
}

Answer 2

试试这个：

最小宽度：100％; 最小高度：100％;

我们的想法是，无论分辨率如何，您都希望图像保持相同的大小。

Answer 3

设置最小高度和宽度？

min-height：1920px; min-width：1024px;

http://www.w3schools.com/cssref/pr_dim_min-height.asp

http://www.w3schools.com/cssref/pr_dim_min-width.asp

Answer 4

尝试以下方法：

html {
  width: 100%;
  height: 100%;
  }
body {
    min-width: 100%;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
    background: #A98436 url('http://i.gyazo.com/4c2ffe00930d09cec27404ecccdeec18.jpg') no-repeat left top;
    background-repeat: no-repeat;
    background-size: contain; /* maintains background-image's ratio while keeping it within body */
    font-family: 'ubuntu', 'Open Sans', sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
}

有关背景大小的更多信息，请参阅background-size - CSS | MDN。

即使屏幕尺寸不够大，如何使背景图像缩放到100％的高度和宽度

4 个答案: