Html 最大宽度：100%无法在mozilla中处理图像

我正在为一个客户设计一个快速响应的网站，在这个网站上，图像需要根据屏幕的宽度调整大小。 我将图像设置为最大宽度：100%和高度：自动，它在chrome中工作得很好，但在mozilla中却不行

这里是链接

还有一个类似的问题

而且，根据它的回答，我试着给它的父母一个100%的宽度，但那没有帮助

这是我的HTML代码

<div id="wrapper">
   <header>
        <section class="banner1">
            <img class="banner" src="img/banner1.jpg" alt="banner1"/>
            <div class="tag1">
            BECAUSE YOU HAVE 
            </div>
        </section>
        <section class="banner2">
            <img class="banner" src="img/banner2.jpg" alt="banner2"/>
        </section>
        <section class="banner3">
            <img class="banner" src="img/banner3.jpg" alt="banner3"/>
            <div class="tag2">
            A 
            </div>
            <div class="tag3">
            CREATIVE GENIUS
            </div>
            <div class="tag4">
            INSIDE YOU
            </div>
            <div class="tag5">
                <div class="btn_join">
                JOIN US 
                </div>
            </div>
        </section>
   </header>
</div><!--wrapper-->

请帮忙

将此添加到css中

body {width: 100%;)

元素显示为父元素的100%。Webkit正确地呈现了这一点，但Chrome要求您明确地声明身体的宽度，以获得正确的结果

将此添加到css中

body {width: 100%;)

元素显示为父元素的100%。Webkit正确地呈现了这一点，但Chrome要求您明确地声明身体的宽度，以获得正确的结果

将此添加到css中

  body, html {margin: 0; padding:0; width: 100%;min-width: 100%;max-width: 100%;}

  img.banner {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
 .banner1, .banner2, .banner3 {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    position: relative;
  }

如前所述，是否移除浮子

    * {float: left;}

将此添加到css中

  body, html {margin: 0; padding:0; width: 100%;min-width: 100%;max-width: 100%;}

  img.banner {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
 .banner1, .banner2, .banner3 {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    position: relative;
  }

如前所述，是否移除浮子

    * {float: left;}

---

这是完全可行的，但是，您在包装器div内容上设置了一个最小宽度。 从main.css行550中删除它，它就会工作

CSS

---

这是完全可行的，但是，您在包装器div内容上设置了一个最小宽度。 从main.css行550中删除它，它就会工作

CSS

将float:left应用于所有元素。浮动块的宽度与其内容所需的宽度相同。在这种情况下，图像初始宽度在父部分上展开

替换块元素（如图像）上的最大宽度并不会使它们占据所有空间-它只是使它们不会比soe值更宽。宽度：100%可以

尝试删除float规则，并将图像宽度设置为100%

您已将float:left应用于所有元素。浮动块的宽度与其内容所需的宽度相同。在这种情况下，图像初始宽度在父部分上展开

替换块元素（如图像）上的最大宽度并不会使它们占据所有空间-它只是使它们不会比soe值更宽。宽度：100%可以

---

尝试删除浮动规则，并为图像指定宽度：100%

您必须使用图像宽度=100%like。

---

它一定对你有用。Gud Luck

您必须使用图像宽度=100%的like。

---

它一定对你有用。Gud Luck

我也遇到了同样的问题，在阅读了这个bugzilla报告后，我发现如果图像嵌套在一个表中，或者应用了{display:table；}属性，那么最大宽度技巧就不起作用了，因为表会根据其内容大小进行调整

因此，我通过Firefox中的dev工具在我的DOM中查找这个属性，并在第一个div中找到了一个{display:table；}。有人试图扩展网站吗？我现在使用的是TikiWiki CMS，一个旧版本12

无论如何，将CSS修改为{display:block；}使{max width:100%}规则现在起作用了，所以最后我得到了小图像，它们的大小保持不变，而大图像的大小调整为容器宽度

---

因为我花了一些时间才发现，我只是想让我们分享一下这个，如果它可以避免其他人在这个问题上浪费时间

我也遇到了同样的问题，在阅读了这个bugzilla报告之后，我发现如果图像嵌套在一个表中，或者应用了{display:table；}属性，那么最大宽度技巧就不起作用了，因为该表适应了它的内容大小

因此，我通过Firefox中的dev工具在我的DOM中查找这个属性，并在第一个div中找到了一个{display:table；}。有人试图扩展网站吗？我现在使用的是TikiWiki CMS，一个旧版本12

无论如何，将CSS修改为{display:block；}使{max width:100%}规则现在起作用了，所以最后我得到了小图像，它们的大小保持不变，而大图像的大小调整为容器宽度

---

因为我花了一些时间才发现，我只是想让我们分享一下这个，如果它可以避免其他人在这个问题上浪费时间

对于我的问题，使用bootstrap衍生工具，我不希望我的图像在没有容器那么大的情况下缩放到100%

---

对于我的xs容器，对于我的问题，使用bootstrap派生工具，我不希望我的图像在没有容器那么大的情况下缩放到100%

---

对于我的xs容器，请尝试提供其他详细信息，例如：{width:100%；min width:100%；max width:100%}尝试提供其他详细信息，例如：{width:100%；min width:100%；max width:100%}无法删除它。这是为了限制响应能力超过1000px。哈哈，你也有，否则你的网站将根本没有响应。不能删除它。这是为了限制响应速度超过1000px。哈哈，你也有，否则你的网站将根本没有响应。没有删除浮动，只是增加了宽度：100%的图片解决了这个问题。@ManikArora很高兴我的答案有帮助。但我仍然看到相同的图片，如果我将视口设置为w

---

ider than 1900px-图像的原始宽度。没有删除浮动，只是在图像上添加宽度：100%就解决了问题。@ManikArora很高兴我的答案有帮助。但我仍然看到相同的图片，如果我看到的视口比1900px宽——图像的原始宽度。