36

そのため、どの画面サイズでもトリミングせずに、できるだけ大きな画像を表示しようとしています。これはheight: 100%; width: autoinlandscapeとwidth: 100%; height: autoin を意味しportraitます。

Retina iPad を埋めるのに十分な大きさの画像を提供しているので、ほぼすべての画面サイズで画像が縮小されます。これは、横向きモードの Internet Explorer と Firefox を除くすべてのブラウザーと向きでうまく機能し、ほとんどすべての画面に対して大きすぎます。これは横向きのみです。

関連するコードは次のとおりです。

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

私は IE9 よりも古いことについてあまり気にしていませんが、理想的にはすべてを提供したいと考えています。ただし、IE9+ と Firefox に対応できる限り、私は満足しています。

width:100%ところで、Firefox の Inspector はルールが守られていると言っていますが、明らかにそうではありません。

よろしくお願いします！

4

2 に答える 2

54

あなたは持っていますがmax-width: 100%、100％何ですか？親の幅のうち、そうですか？ただし、親は幅が設定されていないインラインブロック（class = "sponsor"）であるため、その幅は子、特に子の優先幅によって異なります。

このスタイルのレイアウトは、CSS仕様では定義されていません。特に、この場合の子の固有の幅は、親の幅に依存し、親の幅は、子の固有の幅に依存します。関連する仕様テキストについてはhttp://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-floatを参照し、すべての「定義しない」ビットに注意してください。

<div class="sponsor">私はあなたに幅を与えることをお勧めします。それで問題が解決するはずだと思います。

于 2013-01-29T07:57:29.927 に答える