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

【问题标题】：Need to resize banner to fit window CSS需要调整横幅大小以适应窗口 CSS
【发布时间】：2016-07-25 17:48:08
【问题描述】：

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

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

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.

【问题讨论】：

标签： html css image resize banner

【解决方案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;
}

【讨论】：

感谢您的帮助，不幸的是，现在横幅在移除中心标签后会在左侧对齐。有什么想法吗？
现在除了横幅尺寸外，一切都运行良好

【解决方案2】：

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

【讨论】：

【解决方案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%;
}

【讨论】：

【解决方案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;
}

【讨论】：