max-width:100% not working on images in mozilla

Question

I am designing a responsive website for a client where the image needs to be resized according to the width of screen. I set the image to max-width:100% and height:auto and it's working perfectly in chrome but not in mozilla.

Here is the link http://touchtalent.cloudvent.net/

Also, there is a similar question at Image mysteriously ignoring max-width in Firefox & IE

And, according to it's answer, I tried to give it's parent a width of 100%, but that doesn't help.

Here is my HTML code

<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-->

Here is its 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;
 }

Please help!

try giving the rest of the details such as : {width:100%; min-width:100%;max-width:100%} — Simon Davies, Jan 28 '14 at 13:38

score 4 · Accepted Answer · answered Jan 28 '14 at 13:45

4

You have float:left applied to all elements. Floated blocks occupy as much width, as needed by their content. In this case, image initial width "spreads" on the parent section.

And max-width on replaced block elements (such as images) doesn't make them occupy all the space - it just makes them not to widen more, than soe value. width:100% does

Try removing the float rule and give images width:100%

answered Jan 28 '14 at 13:45

bonflash

714
6
17

2

Didn't remove float but just adding width:100% to images solved the purpose. – Manik Arora Jan 28 '14 at 13:52
@ManikArora glad my answer helped. But I still see the same picture, if I the viewport is wider than 1900px - the original width of the images. – bonflash Jan 29 '14 at 02:57

Joel.O · Answer 2 · 2015-06-19T16:48:59.907

I had the same problem and after reading this bugzilla report https://bugzilla.mozilla.org/show_bug.cgi?id=975632 I found out that if the image is nested in a table or a {display: table;} property is applied, then the max-width trick doesn't work because the table adapts to its content size.

So I hunted down this property in my DOM via dev tools in Firefox and I found a {display: table;} on one of the very first divs. Some attempt to scale the website ? I'm using currently TikiWiki CMS, an old version (12).

Anyway, correcting the CSS to {display: block;} made the {max-width: 100%} rule now work, and so finally I get the small images keeping their sizes and the big ones resizing to the container width.

As it took me some time to find out, I just thought let's share this if it can avoid others to loose time on this !!!

score 0 · Answer 3 · answered Jan 28 '14 at 13:44

add this to your 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;
  }

also as also mentioned remove the float?

    * {float: left;}

score 0 · Answer 4 · answered Jan 28 '14 at 13:45

0

This is completly working, however, you set a minimum width on your #wrapper div content. Remove it from the main.css line 550 and it will work

CSS

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

answered Jan 28 '14 at 13:45

Romain

1,903
2
18
23

Can't remove it. It's for limiting the responsiveness to go beyond 1000px. – Manik Arora Jan 28 '14 at 13:49
Lol, you have too, otherwise your website won't be responsive at all. – Romain Jan 28 '14 at 13:53

score 0 · Answer 5 · answered Apr 25 '14 at 06:31

0

You must use image width="100%" like (). It must work for you. Gud Luck

answered Apr 25 '14 at 06:31

Meena Dhyani

1
1

rambillo · Answer 6 · 2016-01-26T00:51:09.217

For my issue (and using a bootstrap derivative), I didn't want my images scaled to 100% when they weren't intended to be as large as the container.

For my xs container (<768px as .container), not having a fixed width drove the issue, so I put one back on to it with javascript & jQuery (less the 15px col padding).

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

score -1 · Answer 7 · answered Jan 28 '14 at 13:42

-1

Add this to your css.

body {width: 100%;)

Your elements are displaying as 100% of your parent element. Webkit renders this properly, but Chrome requires you to explicitly state the width of your body to achieve the proper result.

answered Jan 28 '14 at 13:42

bboysupaman

1,274
1
13
20

max-width:100% not working on images in mozilla

7 Answers7