Image mysteriously ignoring max-width in Firefox & IE

Question

So I'm trying to display images as big as possible with no cropping on any screen size. This means height: 100%; width: auto in landscape and width: 100%; height: auto in portrait.

I'm serving up images that are big enough to fill retina iPads so pretty much every screen size will be scaling the images down. It does this fine in every browser & orientation except Internet Explorer & Firefox in landscape mode, leaving them far too big for pretty much every screen. This is only in landscape, mind you.

The relevant bits of code are:

<style type="text/css">

            #container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}

            #content {
              text-align: center;
              margin: 0px;
                font-size:0;
                 position: absolute;
                top:0; left: 0; right: 0; bottom: 0
            }

            #content:before {
              content: '';
              display: inline-block;
              height: 100%; 
              vertical-align: middle;
              margin-right: -0.25em; 
             }

            .sponsor {
              display: inline-block;
              vertical-align: middle;
             }

             #content img {
                max-width: 100%;
                width: 100%;
                height:auto;
            } 
@media all and (orientation: landscape) {
                 #main {        
                    top:0;
                    display: block;  
                    width: 100%;
                    height: 100%;                       
                    margin:0px auto; 
                    text-align:center;
                     }

                    #content img {
                                height:100%;
                                width:auto;
                                max-width:auto !important;
                                max-height:100%;
                                display:block;
                                margin:0 auto;
                }

}
</style>

<div  id="content"> 
 <?php if (has_post_thumbnail( $post->ID ) ): ?>
 <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>              
         <div title="Click to flip" class="sponsor">

                 <a href="#" class="img-link"> 
                        <img src="<?php echo $image[0]; ?>" alt="" class="feat-1" style="display: block;" />
                    </a>

                     <a href="#"> 
                      <img src="<?php echo kd_mfi_get_featured_image_url('featured-image-2', 'post', 'full'); ?>" alt="" class="feat-2" style="display: none;" />
                    </a>

            </div><?php endif; ?>
</div><!-- End div #content -->

I'm not too bothered about older than IE9 but ideally would like to serve everything. However as long as I can serve IE9+ & Firefox I'll be happy.

Oh, and by the way - Inspector in Firefox is telling me that the width:100% rule is being followed, but clearly it is not.

Many thanks in advance!

Solution 1

You have max-width: 100%, but 100% of what? Of the parent width, right? But the parent is an inline-block (with class="sponsor") whose width is not set, so its width depends on the children, and in particular on the preferred width of the children.

The layout of this styling is undefined in the CSS specification. In particular, the intrinsic width of the kids in this case depends on the width of the parent which in turn depends on the intrinsic width of the kids. See http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float for the relevant spec text and note all the "does not define" bits.

I recommend giving your <div class="sponsor"> a width. That should deal with the problem, I would think.

Solution 2

My fix was two-fold. It worked when no other suggestions did. It uses targeting for FF only, the older width: 100% fix, and an additional experimental property.

To get it to work I did the following:

@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

The magic bullet was the experimental -moz-max-content value. Combined with width: 100%, it makes FF behave like Safari/Chrome's max-width: 100%; setup.

I found this out from the following source:

http://ss64.com/css/max-width.html

Comments

[sanjaypoyzer]

Ah! Yes, giving <div class="sponsor"> a width solved it. Really threw me that Chrome & Safari took the width from the grandparents but IE & Firefox didn't. Thanks so much!

[Boris Zbarsky]

Chrome and Safari do something along the lines of percentage max-width on a replaced element giving it a zero min-intrinsic width and then the shrink-wrap algorithm on the inline block gives it a width equal to the parent. At least as far as I can tell that's what WebKit is doing in this case.

[Ilya Karnaukhov]

Solved my problem as well. Thanks!

[raiderrobert]

This recommendation solved my issue as well. In my case, the parent was an anchor tag so my structure went div.class > a > img and I had css that basically said .class img: { max-width: 100%;}. I solved my issue by saying .class a: { max-width: 100%;}

[Solmead]

In my opinion, in this case (max-width:100%) it should act like the image is not there layout the page, then make the image the width that the element it is in ends up at. That to me is what it is semantiacally saying and is how safari and chrome and ie edge seem to act