Question

所以我试图在任何屏幕尺寸上都没有裁剪的情况下尽可能大地显示图像。这意味着height: 100%; width: auto中的landscape和width: 100%; height: auto中的portrait。

我正在提供大到足以填充视网膜iPad的图像，因此几乎每个屏幕尺寸都会缩小图像。它在每个浏览器中都可以做到这一点。除了Internet Explorer＆amp; 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 +＆amp; Firefox我会很高兴。

哦，顺便说一下 - Firefox中的Inspector告诉我正在遵循width:100%规则，但显然不是。

非常感谢提前！

Answer 1

你有max-width: 100%，但100％的是什么？父母的宽度，对吗？但是父级是一个内联块（带有class =“sponsor”），其宽度未设置，因此其宽度取决于子级，特别是子级的首选宽度。

CSS规范中未定义此样式的布局。特别地，在这种情况下，孩子的固有宽度取决于父母的宽度，而父母的宽度又取决于孩子的固有宽度。有关相关规范文本，请参阅http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float，并注意所有“未定义”位。

我建议你给<div class="sponsor">一个宽度。我认为应该处理这个问题。

Answer 2

我的修复是双重的。当没有其他建议时，它工作。它仅使用针对FF的定位，较旧的width: 100%修复，以及其他实验属性。

为了让它发挥作用我做了以下事情：

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

魔术子弹是实验-moz-max-content值。结合width: 100%，它使FF的行为类似于Safari / Chrome的max-width: 100%;设置。

我从以下来源找到了这个：

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

图像神秘地忽略了Firefox中的最大宽度IE

2 个答案: