图像神秘忽略Firefox和IE最大宽度(Image mysteriously ignoring m

所以我想对任何屏幕大小没有裁剪显示尽可能大的图像。 这意味着height: 100%; width: auto height: 100%; width: auto在landscape和width: 100%; height: auto width: 100%; height: auto的portrait 。

我服了那些大到足以填补视网膜台iPad如此，几乎每一个屏幕尺寸将缩放图像下来的图像。 它在每一个浏览器和方向除了IE和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的我会很高兴。

哦，顺便说一句-督察Firefox是告诉我， width:100%规则被人跟踪，但显然事实并非如此。

提前谢谢了！

Answer 1:

你有max-width: 100%但什么100％？ 父宽度吧？ 但是父是直列块（带有class =“赞助商”），其宽度没有被设置，因此，其宽度依赖于儿童，特别是对孩子的优选宽度。

这种样式的布局在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 /铬的max-width: 100%; 建立。

我发现了这一点，从以下来源：

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

文章来源: Image mysteriously ignoring max-width in Firefox & IE