CODEWITHSUNDEEP
cssfirefoxresponsive-design
Tom Stermitz
Tom Stermitz

Reputation: 182

Responsive Images won't Scale with Firefox as screen size is adjusted. Works in other Browsers

I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:

img {   
  max-width: 100%;   
  width: auto;   
  height: auto; 
}

As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%; Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.

Anyway, I got things to work by overriding the image width a Firefox specific directive like this:

/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
@-moz-document url-prefix() {  
  img {   
    width: 100%;   
  }
}

I don't think I should have to do this, and googling doesn't seem to come across this issue.

Upvotes: 6

Views: 23962

Answers (8)

Milingu Kilu
Milingu Kilu

Reputation: 141

This is the default CSS that is used for responsive Images:

img {
  max-width: 100%;
  height: auto;
  width:100%;
}

And this is the indispensable Javascript: Bongard.net

Thanks to David Bongard for the Javascript.

Now add the following to the "if safari" rule of the Script:

for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
  document.getElementsByTagName("img")[i].style.width = "auto";
  }

Safari wants width:auto; the rest of the browsers i tested are happy with width:100%;

Upvotes: 9

Max Enrique Sequeira Garza
Max Enrique Sequeira Garza

Reputation: 31

Well after trying all sorts of codes and fidles, this simple edition on my css did the trick for me:

img {width: 100%;}

Simply then where you wish your images to resize, define them without adding the "width" parameter (sizing to original from source); and then if you do wish to fix their size, simply add the "width" parameter on SRC style (regular width="" definition won't work). If it's an inline image on your paragraph, simply wrap it in a div and align that div to whatever side you'd like. Reeeeally simple!

It works both for Google, Firefox and IE. Cheers!

Upvotes: 1

Thilak Raj
Thilak Raj

Reputation: 920

If you use the width for image in px or gave padding or used display:table instead of display:block for the image, then image responsiveness will not work properly on some/all browsers

Upvotes: 1

Aaron Surrain
Aaron Surrain

Reputation: 366

I used Kridsada Thanabulpong's jsfiddle but only got it to work when I removed display:table from the div wrapping my image.

Upvotes: 0

FurryCritter
FurryCritter

Reputation: 9

I have just had this problem and found a solution: When I set the img max-width in my CSS sheet, nothing happens - the image won't scale. When I set max-width in the page itself - where the image is called, it works in all browsers and on all devices.

No: 

img {
    max-width: 100%;
    height: auto;   }

Yes: 

<img src ="image.jpg" style="max-width:100%; height:auto;">

If anyone can shed some light of wisdom on this, please do.

Upvotes: 0

dmitriy.g
dmitriy.g

Reputation: 101

This works for me

@-moz-document url-prefix() {  
    img{
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {    
     img{
        max-width: 100%;
    }    
}

Upvotes: 7

Kridsada Thanabulpong
Kridsada Thanabulpong

Reputation: 181

I have similar problem, and found out setting max-width on the wrapper element kinda solves the issue. (Only tested with Firefox 23, but it should works with earlier Firefox too.) See also these JSFiddle:

Before max-width:

before max-width

After max-width:

after max-width

One thing to note, however, if you happens to set padding on wrapper element, it won't be taken into img's width calculation and will cause inconsistent results between Firefox and Safari (http://jsfiddle.net/CLUGX/3/):

gahhh

Upvotes: 5

Boris Zbarsky
Boris Zbarsky

Reputation: 35084

Chances are your image is inside a shrink-wrapping container, which then has to compute it's width based on the width of the image. And then the max-width of the image is 100% of the container's width.

If that's what's going on, the CSS spec doesn't actually define the behavior of such markup, where the parent's width depends on the child and the child's width depends on the parent.

See https://bugzilla.mozilla.org/show_bug.cgi?id=823483 for some discussion on the issue.

Upvotes: 2

Related Questions