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

Posted 2023-03-06

【中文标题】需要调整横幅大小以适应窗口 CSS

【英文标题】：Need to resize banner to fit window 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" >
    </center>
</div>

The website is here.

【参考方案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" >
  </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" >
</div>

另外，删除<center>，它已被弃用。并添加以下行以使图像在其固有宽度大于容器时自动缩小以适应：

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