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

【问题标题】：full img size in any screen size任何屏幕尺寸的完整 img 尺寸
【发布时间】：2018-12-30 18:05:09
【问题描述】：

当我在笔记本电脑上运行代码时，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 应该在任何屏幕尺寸上全屏显示吗？

【问题讨论】：

你的 html 是什么？
Full-screen responsive background image的可能重复
试试background-repeat: no-repeat;
@zenubeh 以下答案是否有帮助？
@AravindS 这不起作用。屏幕完成后，它会显示一个白条。

标签： html css styles

【解决方案1】：

这可以解决你的问题：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

html {
  height: 100%;
}

【讨论】：

【解决方案4】：

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

background-repeat: no-repeat;

即使您可以在一行中提及所有内容，例如

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

如果你想拉伸图像，那么

background-size: 100% auto;

【讨论】：

嗨 Aravind，这有帮助，但现在背景图片已放大。您知道如何解决此问题吗？
@zenubeh 你需要一个分辨率（宽度和高度）更好的图像，只能解决它
我用这个代码修复了它：背景：url（pic.jpg）无重复中心中心固定；谢谢你的提示！
@zenubeh 请注意，如果您使用的是固定的，它有可能无法在移动设备中使用。使用前请仔细检查。如果有帮助，请接受它作为答案..谢谢！
@zenubeh 你的问题解决了吗？

【解决方案5】：

使用

background-repeat:no-repeat;

你可以通过使用来减少代码

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

【讨论】：

【解决方案6】：

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

background-repeat:no-repeat;

【讨论】：