Question

我正在为客户设计一个响应式网站，其中图像需要根据屏幕宽度调整大小。我将图像设置为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;
 }

请帮忙！

Answer 1

您已将float:left应用于所有元素。浮动块占据其内容所需的宽度。在这种情况下，图像初始宽度在父节上“展开”。

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

尝试删除浮动规则并为图片提供宽度：100％

Answer 2

我遇到了同样的问题，在阅读了这个bugzilla报告https://bugzilla.mozilla.org/show_bug.cgi?id=975632后，我发现如果图像嵌套在一个表中或者应用了{display：table;}属性，那么最大宽度技巧就没有了因为表格适应其内容大小，所以无法正常工作。

所以我通过Firefox中的dev工具在我的DOM中搜索了这个属性，我在其中一个最初的div上找到了{display：table;}。有人试图扩大网站？我目前使用的是TikiWiki CMS，旧版本（12）。

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

由于我花了一些时间才发现，我只是想让它分享这个，如果它可以避免其他人在这上面浪费时间!!!

Answer 3

将此添加到您的CSS。

body {width: 100%;)

您的元素显示为父元素的100％。 Webkit正确呈现，但Chrome要求您明确说明身体的宽度以获得正确的结果。

Answer 4

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

Answer 5

这完全正常，但是，您在#wrapper div内容上设置了最小宽度。将它从main.css行550中删除它将起作用

<强> CSS

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

Answer 6

您必须使用图像宽度=“100％”，如（）。它必须适合你。 Gud Luck

Answer 7

对于我的问题（以及使用引导衍生物），我并不希望我的图像缩放到100％，因为它们并不像容器一样大。

对于我的xs容器（＆lt; 768px as .container），没有固定的宽度会导致问题，所以我用javascript＆amp; jQuery（减去15px col填充）。

// 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 );

max-width：100％无法处理mozilla中的图像

7 个答案: