需要调整横幅以适应 window CSS

Question

我正在努力使我的网站 logo/banner 正确适合内容框。不幸的是，它在不同的计算机分辨率和 window 大小下以不同的宽度出现。

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

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

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

Answer 2

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

Answer 3

请试试这个：

首先用一个 div 命名包装器包装整个页面。

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

Answer 4

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

需要调整横幅以适应 window CSS

Need to resize banner to fit window CSS

html

css

resize

image

banner