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

2019年7月27日 180次阅读

我正在尝试使我的网站徽标/横幅正确地适合内容框.

不幸的是,它在不同的计算机分辨率和窗口大小上出现在不同的宽度上.

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

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.

最佳答案 < center>已弃用,因此请勿使用它.

要解决您的问题,您需要定位img而不是div

使用margin：auto和display：阻止图像居中而不是弃用的中心

#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;
}
点赞