37

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!

suryanaga
  • 3,728
  • 11
  • 36
  • 47

2 Answers2

55

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.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • Ah! Yes, giving ` – suryanaga Jan 29 '13 at 13:27
  • 3
    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. – Boris Zbarsky Jan 29 '13 at 14:35
  • 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%;} ` – raiderrobert Oct 30 '15 at 13:09
  • 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 – Solmead Mar 28 '16 at 18:03
16

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

atwixtor
  • 795
  • 10
  • 26