Css 从零开始创建网站的极端初学者，我如何集中事物、图片和缩放问题

我已经添加了一个图像，我想成为我的网站的横幅

但是，当我放大到100%时，它看起来是这样的：

为什么它会这样做？我如何使它在100%缩放时完全居中？这是我的css：

.Banner {
  width: 200px;
  margin: auto;
}

选择一张非常大的图片如何影响这一点？有没有可能只使用css将其缩小到更小的尺寸

---

非常感谢您的帮助

我建议使用

背景尺寸：封面，将其作为元素的
背景图像
和
背景位置：中间。它可以处理任何图像，并且始终居中并填充


正文{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：1080px；
保证金：0自动；
}
.横幅{
背景图片：url(http://www.placehold.it/2048x2048?text=Banner);
高度：250px；
背景尺寸：封面；
背景位置：中心；
保证金：0；
}
导航{
显示：块；
背景：#aaa；
}
保险商实验室{
文本对齐：居中；
列表样式：无；
保证金：0；
填充：0；
}
李{
显示：内联块；
利润率：5x10px；
}
a{
颜色：黑色；
字体大小：粗体；
文字装饰：无；
}









我建议使用
背景尺寸：封面，将其作为元素的
背景图像
和
背景位置：中间。它可以处理任何图像，并且始终居中并填充


正文{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：1080px；
保证金：0自动；
}
.横幅{
背景图片：url(http://www.placehold.it/2048x2048?text=Banner);
高度：250px；
背景尺寸：封面；
背景位置：中心；
保证金：0；
}
导航{
显示：块；
背景：#aaa；
}
保险商实验室{
文本对齐：居中；
列表样式：无；
保证金：0；
填充：0；
}
李{
显示：内联块；
利润率：5x10px；
}
a{
颜色：黑色；
字体大小：粗体；
文字装饰：无；
}









您刚刚忘记使用
显示：块在图像上

看看这个

HTML
您只是忘记使用
display:block在图像上

看看这个

HTML
你能提供一些HTML吗？你能提供一些HTML吗？如果我想用图片作为横幅怎么办。我试着复制一个类似这样的网站：@Simon2233我刚刚更新了它，使它看起来像你的例子。如果这对你有效，你能选择正确吗？这是你的代码的外观，看起来图片的宽度与导航栏不匹配。我还想问，你做了什么更改，以至于当我打开html文件时，它已经被放大了100%？确保你没有在任何地方放置
标记。您应该从css
url（）
中引用图像。我可以看看你的html吗？哦，是的，我一直在使用标签，这是我的html:。使用背景img url和img有什么区别？如果我想使用图片作为横幅怎么办。我试着复制一个类似这样的网站：@Simon2233我刚刚更新了它，使它看起来像你的例子。如果这对你有效，你能选择正确吗？这是你的代码的外观，看起来图片的宽度与导航栏不匹配。我还想问，你做了什么更改，以至于当我打开html文件时，它已经被放大了100%？确保你没有在任何地方放置
标记。您应该从css
url（）
中引用图像。我可以看看你的html吗？哦，是的，我一直在使用标签，这是我的html:。使用后台img url和img有什么区别？img会使它适用于所有标签，对吗？如果我有更多，我可以使用divimg{}。如果我错了，请纠正我@Simon2233您可以为所有要应用样式的图像设置一个类，并让其他图像使用其默认样式。这很好，但我认为这不会像横幅一样。它必须具有相同的横幅比例。但这总是可以改变的。img会使它适用于所有标签，对吗？如果我有更多，我可以使用divimg{}。如果我错了，请纠正我@Simon2233您可以为所有要应用样式的图像设置一个类，并让其他图像使用其默认样式。这很好，但我认为这不会像横幅一样。它必须具有相同的横幅比例。但这总是可以改变的。
<div>
  <img src="http://payload272.cargocollective.com/1/3/114820/7754510/ALS-LOGO-01-01_1200.png" alt="">
</div>

div {
  width: 100%;
}

img {
  display: block;
  width: 250px;
  margin: auto;
}