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

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