需要调整横幅大小以适应窗口CSS

Question

我正在尝试让我的网站标志/横幅正确适应内容框。不幸的是，它在不同的计算机分辨率和窗口大小上显示出不同的宽度。

我的内容框内广告也出现了这种情况。

CSS

#logo {
    max-width: 100%;
    height: auto;
    width: auto; 
}

HTML

<div id="logo">
    <center>
        <img src="logo.png" alt="Image of Traffic Monsoon">
    </center>
</div>

The website is here.

- user1521810

Answer 1

为了使内联元素如<img>标签居中，您可以在容器上设置text-align:center;，以您的示例为例：

#logo {
  text-align: center;
}

<div id="logo">
  <img src="logo.png" alt="Image of Traffic Monsoon">
</div>

此外，移除<center>标签，因为它已被弃用。并添加以下行以使图像在其内在宽度大于容器时自动缩小以适应：

#logo img {
  max-width: 100%;
  height: auto;
}

- Stickers

Answer 2

<center>已经过时，所以不要使用它。

要解决您的问题，您需要针对img而不是div进行定位。

使用margin:auto和display:block来居中图片，而不是过时的center标签。

#logo img {
  max-width: 100%;
  height: auto;
  width: auto;
  margin:auto;
  display:block
}

<div id="logo">
  <a>
    <img src="http://clubtrafficmonsoon.com/banner.gif" alt="Image of Traffic Monsoon">
  </a>
</div>

如果您想将此应用于站点中的所有图像，请执行以下操作：

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

- dippas

---

谢谢您的帮助，不幸的是，在删除中心标签后，横幅现在左对齐。有什么想法吗？ - user1521810

除了横幅尺寸之外，一切都运作得非常完美。 - user1521810

Answer 3

将整个页面包装在<main>元素或wrapper类中。在该元素上设置max-width，所有后续元素都可以设置width:100%。

- Simon G

Answer 4

请尝试以下操作：

首先，使用名为“wrapper”的

将整个页面包装起来。

<div class="wrapper">your code here</div>

然后应用以下 css：

.wrapper {
    margin: 0 auto;
    width: 1574px;
}

#logo {
    margin: 0 auto;
    text-align: center;
    width: 1331px;
}

#logo img{
    text-align: center;
    width: 96%;
}

- satya