Question

当我在笔记本电脑中运行代码时，img将以全屏显示。但是，当我在更大的屏幕尺寸上运行它时，它会变成两倍：enter image description here

这是我使用的CSS代码：

body {

  background: url(pic.jpg); 
  background-size: cover;  
  background-position: center;
  font-family: Lato;
  color: white;
}


html {
height: 100%
}

有人可以帮我解决该问题吗，即img在任何屏幕尺寸下都应全屏显示吗？

Answer 1

在代码中添加以下样式，以避免重复图像：

background-repeat:no-repeat;

Answer 2

由于将其用作背景，因此可以使用此属性来避免在高分辨率下出现两次

background-repeat: no-repeat;

甚至您也可以在一行中提及所有内容

background: #fff url('pic.jpg') no-repeat center center;

如果要拉伸图像，则

background-size: 100% auto;

Answer 3

body {
  background: url(pic.jpg); 
  background-size: cover;  
  background-position: center;
  font-family: Lato;
  color: white;
  width:100%;
  height:100%;
}

html {
  height: 100%;
}

Answer 4

使用

background-repeat:no-repeat;

，您可以使用来减少代码

background: url('pic.jpg') no-repeat cover center;

Answer 5

body {
  background-repeat: no-repeat;
  width:100%;
  height:100%;
}

Answer 6

这可以解决您的问题：

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-image: url('PATH_TO_IMG');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

您可以在此处https://codepen.io/Nacorga/pen/mjmBLp

查看示例

任何屏幕尺寸的完整img尺寸

6 个答案: