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

Question

我正在尝试使我的站点 Logo /横幅正确适合内容框。不幸的是，它在不同的计算机分辨率和窗口大小下以不同的宽度出现。

我在内容框中的横幅广告也会出现这种情况。

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.

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;
}