Html 如何在不调整大小或缩放的情况下将图像放大到100%的屏幕

这里我有一个img中的.png图像，当我缩小浏览器的窗口大小时，图像仍然以原始样式显示，滚动条显示在页面底部。但是我想要底部没有滚动条的原始图像。我不想缩放或调整图像大小

HTML:

这就是它现在的样子。您可以在底部看到滚动条，当我滚动时，图像以实际宽度显示。但当我调整窗口大小时，图像的原始大小应保持不变，但它应显示在没有滚动条的屏幕中。最大宽度：100%；放大图像，但不应放大图像，而应保持图像的高度和宽度不变，且滚动条不应出现在底部

如何使用css实现这一点

---

对于滚动条，我需要更多的代码来查看，但我可以说您可以在外部div/body中使用“overflow:hidden”。

您可以尝试将背景图像应用到body元素，如下所示

body {
  background-image: url('../images/background.png');
  background-size: cover;
}

如果需要将其附加到元素，可以创建一个带有headerimg类的section或div元素，并应用以下内容

.headerimg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
  background-image: url('../images/background.png');
  background-size: cover;
}

---

我希望这有帮助

请发布完整的代码或提供演示。您必须给出

最大宽度：100%

到

img

你可以在你的headerimg类中添加宽度：100%。请提供一个JSIDLE链接。好的，我通过在父元素中添加溢出-x:hidden来修复它…检查

.headerimg{
    position:absolute;
    z-index:-1;
    width: [image's real width];
}

body {
  background-image: url('../images/background.png');
  background-size: cover;
}

.headerimg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
  background-image: url('../images/background.png');
  background-size: cover;
}