web-dev-qa-db-fra.com

Image ignorant mystérieusement la largeur maximale dans Firefox & IE

J'essaie donc d'afficher des images aussi grandes que possible sans recadrage sur aucune taille d'écran. Ça signifie height: 100%; width: auto dans landscape et width: 100%; height: auto dans portrait.

Je propose des images suffisamment grandes pour remplir les iPad de la rétine, donc à peu près toutes les tailles d'écran réduiront les images. Il le fait très bien dans tous les navigateurs et toutes les orientations, sauf Internet Explorer et Firefox en mode paysage, les laissant beaucoup trop grands pour à peu près tous les écrans. Ce n'est que dans le paysage, attention.

Les bits de code pertinents sont:

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

Je ne suis pas trop gêné par rapport à IE9, mais j'aimerais idéalement tout servir. Cependant, tant que je peux servir IE9 + et Firefox, je serai heureux.

Oh, et en passant - Inspector dans Firefox me dit que le width:100% la règle est respectée, mais ce n'est clairement pas le cas.

Merci d'avance!

cssinternet-explorerfirefoxresponsive-designmax
34
sanjaypoyzer

Tu as max-width: 100%, mais 100% de quoi? De la largeur du parent, non? Mais le parent est un bloc en ligne (avec class = "sponsor") dont la largeur n'est pas définie, donc sa largeur dépend des enfants, et en particulier de la largeur préférée des enfants.

La disposition de ce style n'est pas définie dans la spécification CSS. En particulier, la largeur intrinsèque des enfants dans ce cas dépend de la largeur du parent qui à son tour dépend de la largeur intrinsèque des enfants. Voir http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float pour le texte de spécification pertinent et notez tous les bits "ne définit pas".

Je recommande de donner à votre <div class="sponsor"> une largeur. Je pense que cela devrait régler le problème.

53
Boris Zbarsky

Ma solution était double. Cela a fonctionné quand aucune autre suggestion ne l'a fait. Il utilise uniquement le ciblage pour FF, l'ancien width: 100% fix, et une propriété expérimentale supplémentaire.

Pour le faire fonctionner, j'ai fait ce qui suit:

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

La balle magique était l'expérimentation -moz-max-content valeur. Combiné avec width: 100%, FF se comporte comme Safari/Chrome max-width: 100%; installer.

J'ai découvert cela à partir de la source suivante:

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

16
atwixtor