背景大小：包含不显示整个图片

Question

我想知道为什么 contain 会这样工作。这是我的 HTML 代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>

</body>

</html>

现在，这是我的 CSS 代码：

body {
/* min-height: 100%;   */
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: contain;   
background-repeat: no-repeat;
}

我的问题是：为什么body里面没有整个背景图片？为什么图片超出了浏览器的这张图片的边框window:

https://i.stack.imgur.com/uDuzD.png

Answer 1

尝试更改为 background-size:cover。您需要将此属性添加到正文中的全角 div。你不能将它添加到正文中

div {
/* min-height: 100%;   */
width: 100%;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: cover;   
background-repeat: no-repeat;
}

Answer 2

background-size：包含在 body 标签中不起作用

试试这个

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>
<div>

</div>
</body>

</html>

和css

    div {
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('img Url');
background-size: contain;   
background-repeat: no-repeat;
}

Answer 3

将样式应用于 html 而不是 body 将解决此问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>

</body>

</html>

改用html：

html {
/* min-height: 100%;   */
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: contain;   
background-repeat: no-repeat;
}

背景大小：包含不显示整个图片

background-size: contain not showing the whole picture

css

contain

background-size