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

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!

Answer 1

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%

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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.