css - 极端初学者从头开始制作网站，我如何居中事物、图片和缩放问题

Question

我添加了一张图片，我想将其作为我网站的横幅。 http://puu.sh/peaj0/f753d03c5b.png

然而，当我放大到 100% 时，它看起来像这样: http://puu.sh/pealY/7c11f8c9d1.png

为什么会这样，我如何做到在 100% 缩放时完美居中？这是我的 CSS:

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

选择非常大的图片对此有何影响？是否可以仅使用 css 将其缩小到更小的尺寸？

非常感谢您的帮助!

Answer 1

我建议使用 background-size: cover; 和 background-position: center center; 将其作为元素的 background-image >。它适用于任何图像，并且始终居中和填充。

body {
  margin: 0;
}

.wrapper {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.banner {
  background-image: url(http://www.placehold.it/2048x2048?text=Banner);
  height: 250px;
  background-size: cover;
  background-position: center center;
  margin: 0;
}

nav {
  display: block;
  background: #aaa;
}

ul {
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin: 5px 10px;
}

a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

<div class="wrapper">
  <header>
    <div class="banner"></div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Unternehmen</a></li>
        <li><a href="#">Produkte</a></li>
        <li><a href="#">Galerie</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>
</div>