任意屏幕大小的完整img大小

Question

当我在笔记本电脑中运行代码时，img会全屏显示。但当我在更大的屏幕上运行它时，它会加倍：在这里输入图像描述

这是我使用的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: url('pic.jpg') no-repeat cover center;

Answer 3

由于您将其应用为背景，因此可以使用此属性来避免在更高分辨率的中重复出现

background-repeat: no-repeat;

甚至你可以像一样在一行中提到所有这些

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

如果你想拉伸图像，那么

background-size: 100% auto;

Answer 4

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

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