it-swarm.com.de

Das Bild ignoriert auf mysteriöse Weise die maximale Breite in Firefox & IE

Deshalb versuche ich, Bilder so groß wie möglich darzustellen, ohne sie auf einer Bildschirmgröße zuzuschneiden. Das heisst height: 100%; width: auto in landscape und width: 100%; height: auto in portrait.

Ich biete Bilder an, die groß genug sind, um die Netzhaut-iPads zu füllen, sodass so ziemlich jede Bildschirmgröße die Bilder verkleinert. Mit Ausnahme von Internet Explorer und Firefox im Querformat funktioniert dies in jedem Browser und in jeder Ausrichtung, sodass sie für so ziemlich jeden Bildschirm viel zu groß sind. Das ist nur in der Landschaft, wohlgemerkt.

Die relevanten Codebits sind:

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

Ich bin nicht allzu besorgt über älter als IE9, möchte aber im Idealfall alles bedienen. Solange ich jedoch IE9 + und Firefox bedienen kann, bin ich glücklich.

Oh, und übrigens - Inspector in Firefox sagt mir, dass die width:100% Regel wird befolgt, aber es ist eindeutig nicht.

Vielen Dank im Voraus!

34
sanjaypoyzer

Du hast max-width: 100%, aber 100% von was? Von der Elternbreite, richtig? Das übergeordnete Element ist jedoch ein Inline-Block (mit class = "sponsor"), dessen Breite nicht festgelegt ist. Daher hängt seine Breite von den untergeordneten Elementen und insbesondere von der bevorzugten Breite der untergeordneten Elemente ab.

Das Layout dieses Stils ist in der CSS-Spezifikation nicht definiert. Insbesondere hängt die innere Breite der Kinder in diesem Fall von der Breite der Eltern ab, die wiederum von der inneren Breite der Kinder abhängt. Siehe http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float für den relevanten Spezifikationstext und beachten Sie alle Bits, die nicht definiert werden.

Ich empfehle Ihre <div class="sponsor"> eine Breite. Das sollte sich mit dem Problem befassen, würde ich denken.

53
Boris Zbarsky

Ich hatte zwei Probleme. Es hat funktioniert, als es keine anderen Vorschläge gab. Das Targeting wird nur für FF verwendet, das ältere width: 100% fix und eine zusätzliche experimentelle Eigenschaft.

Um es zum Laufen zu bringen, habe ich Folgendes getan:

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

Die magische Kugel war der experimentelle -moz-max-content Wert. Kombiniert mit width: 100%, FF verhält sich dadurch wie Safari/Chrome's max-width: 100%; installieren.

Ich habe dies aus der folgenden Quelle herausgefunden:

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

16
atwixtor