最大宽度：100% 不适用于 Mozilla 中的图像答案

【问题标题】：max-width:100% not working on images in mozilla最大宽度：100% 不适用于 Mozilla 中的图像
【发布时间】：2014-02-19 20:04:26
【问题描述】：

我正在为需要根据屏幕宽度调整图像大小的客户设计一个响应式网站。我将图像设置为 max-width:100% 和 height:auto，它在 chrome 中完美运行，但在 mozilla 中却没有。

这里是链接http://touchtalent.cloudvent.net/

另外，还有一个类似的问题 Image mysteriously ignoring max-width in Firefox & IE

而且，根据它的回答，我试图给它的父级设置 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

* {
float: left;
}


header {
max-width: 100%;
}


img.banner {
  max-width: 100%;
  height: auto;
  display: block;
}


.banner1, .banner2, .banner3 {
  max-width: 100%;
  position: relative;
}


.tag1, .tag2, .tag4, .tag3, .tag5 {
  width: 100%;
  font-family: "HeroLight", sans-serif;
  font-size: 40px;
  color: #FFF;
  position: absolute;
  text-align: center;
  left: 0px;
  bottom: 20px;
  height: 40px;
}


.tag2 {
  top: 20px;
}


.tag4 {
  top: 160px;
}


.tag3 {
  top: 70px;
  font-family: "sixties", sans-serif;
  font-size: 80px;
}


.tag5 {
  bottom: 60px;
}

.tag5 .btn_join {
  background: #FFF;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  color: #000;
  font-size: 23px;
  font-family: "HeroLight", sans-serif;
  width: 198px;
  height: 53px;
  line-height: 60px;
  position: relative;
  left: 50%;
  margin-left: -99px;
  cursor: pointer;
}

@media screen and (min-width: 500px) and (max-width: 1200px) {

.tag1, .tag2, .tag4, .tag3, .tag5 {
width: 100%;
font-family: "HeroLight", sans-serif;
font-size: 25px;
color: #FFF;
position: absolute;
text-align: center;
left: 0px;
bottom: 0px;
height: 40px;
}


.tag2 {
 top: 15px;
}


.tag4 {
top: 100px;
}


.tag3 {
top: 45px;
font-family: "sixties", sans-serif;
font-size: 50px;
}


.tag5 {
 bottom: 25px;
}

.tag5 .btn_join {
 background: #FFF;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
 -o-border-radius: 40px;
 border-radius: 40px;
 color: #000;
 font-size: 23px;
 font-family: "HeroLight", sans-serif;
 width: 198px;
 height: 53px;
 line-height: 60px;
 position: relative;
 left: 50%;
 margin-left: -99px;
 cursor: pointer;
 }
 }
 @media screen and (min-width: 1201px) and (max-width: 1400px) {

   .tag1, .tag2, .tag4, .tag3, .tag5 {
     width: 100%;
     font-family: "HeroLight", sans-serif;
     font-size: 35px;
     color: #FFF;
     position: absolute;
     text-align: center;
     left: 0px;
     bottom: 15px;
     height: 40px;
   }


   .tag2 {
     top: 15px;
   }


  .tag4 {
     top: 125px;
   }


   .tag3 {
     top: 55px;
     font-family: "sixties", sans-serif;
     font-size: 60px;
   }


   .tag5 {
     bottom: 25px;
   }

   .tag5 .btn_join {
     background: #FFF;
     -webkit-border-radius: 40px;
     -moz-border-radius: 40px;
     -ms-border-radius: 40px;
     -o-border-radius: 40px;
     border-radius: 40px;
     color: #000;
     font-size: 23px;
     font-family: "HeroLight", sans-serif;
     width: 198px;
     height: 53px;
     line-height: 60px;
     position: relative;
     left: 50%;
     margin-left: -99px;
     cursor: pointer;
   }
 }

 #wrapper {
   width: 100%;
   min-width: 1000px;
   overflow: hidden;
 }

请帮忙！

【问题讨论】：

尝试提供其他详细信息，例如：{width:100%;最小宽度：100%；最大宽度：100%}

标签： html css

【解决方案1】：

您已将float:left 应用于所有元素。浮动块根据其内容的需要占据尽可能多的宽度。在这种情况下，图像的初始宽度“散布”在父部分上。

替换的块元素（例如图像）的最大宽度不会使它们占据所有空间 - 它只是使它们不会比 soe 值更宽。 width:100% 确实

尝试删除浮动规则并给图像宽度：100%

【讨论】：

没有删除浮动，只是将 width:100% 添加到图像解决了目的。
@ManikArora 很高兴我的回答有帮助。但我仍然看到相同的图片，如果我的视口比 1900 像素宽 - 图像的原始宽度。

【解决方案2】：

我遇到了同样的问题，在阅读了这个 bugzilla 报告 https://bugzilla.mozilla.org/show_bug.cgi?id=975632 后，我发现如果图像嵌套在表格中或应用了 {display: table;} 属性，那么 max-width 技巧不会工作，因为表格适应其内容大小。

所以我通过 Firefox 中的开发工具在我的 DOM 中找到了这个属性，并在第一个 div 中找到了一个 {display: table;}。一些尝试扩展网站？我目前正在使用 TikiWiki CMS，旧版本 (12)。

无论如何，将 CSS 更正为 {display: block;} 使得 {max-width: 100%} 规则现在可以工作，所以最后我得到了保持其大小的小图像和调整容器宽度的大图像。

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

【讨论】：

【解决方案3】：

将此添加到您的 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;}

【讨论】：

【解决方案4】：

这完全有效，但是，您在#wrapper div 内容上设置了最小宽度。从 main.css 第 550 行删除它，它会工作

CSS

#wrapper {
width: 100%;
/* min-width: 1000px; to remove */
overflow: hidden;
}

【讨论】：

无法删除。这是为了限制响应超过 1000px。
大声笑，你也有，否则你的网站根本不会响应。

【解决方案5】：

您必须像 () 一样使用图像宽度=“100%”。它必须为你工作。好运

【讨论】：

【解决方案6】：

对于我的问题（并使用引导衍生工具），我不希望我的图像在不打算与容器一样大时缩放到 100%。

对于我的 xs 容器（

// Helps bootstrap 3.0 keep images constrained to container width when width isn't set a fixed value (below 768px), while avoiding all images at 100% width.
// NOTE: proper function relies on there being no inline styling on the element being given a defined width ( '.container'  )

function setWidth() {
    width_val = $( window ).width();
    if( width_val < 768 ) {
        $( '.container' ).width( width_val - 30 );
    } else {
        $( '.container' ).removeAttr( 'style' );
    }
}

setWidth();
$( window ).resize( setWidth );

【讨论】：

【解决方案7】：

将此添加到您的 CSS。

body {width: 100%;)

您的元素显示为 100% 的父元素。 Webkit 可以正确呈现，但 Chrome 需要您明确声明身体的宽度才能获得正确的结果。

【讨论】：