火狐和IE浏览器中图片神秘地忽略了最大宽度限制

Question

我正试图在任何屏幕尺寸下以不裁剪的方式显示尽可能大的图片。这意味着在横屏模式下使用height: 100%; width: auto，在竖屏模式下使用width: 100%; height: auto。

我提供的图片足够大，可以填满视网膜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，我就会很满意。

哦，顺便说一下 - Firefox的检查器告诉我width:100%规则是被遵循的，但显然并不是这样。

提前致谢！

- sanjaypoyzer

Answer 1

你有一个`max-width: 100%`，但是100%的宽度是相对于什么来计算的呢？是相对于父元素的宽度吗？但是父元素是带有class="sponsor"的内联块级元素，其宽度没有设置，所以它的宽度取决于子元素，尤其是子元素的首选宽度。

这种样式的布局在CSS规范中是未定义的。特别地，这种情况下，孩子们的固有宽度依赖于父元素的宽度，而父元素的宽度又依赖于孩子们的固有宽度。请参见相关规范文本的http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float，并注意所有“不定义”的部分。

我建议给你的`

`元素设置一个宽度。我认为那应该可以解决这个问题。

- Boris Zbarsky

---

啊！是的，给<div class="sponsor">设置宽度解决了问题。Chrome和Safari从祖先那里继承了宽度，但IE和Firefox没有，这真的让我很困惑。非常感谢！ - suryanaga

Chrome和Safari在替换元素上执行类似于百分比最大宽度的操作，会使其具有零的最小内在宽度，然后在内联块的自动收缩算法下，该元素会获得与父元素相等的宽度。至少根据我所知，这就是WebKit在这种情况下所执行的操作。 - Boris Zbarsky

这个建议也解决了我的问题。在我的情况下，父元素是一个锚标签，所以我的结构是 div.class > a > img，我有一些 CSS 代码基本上是这样写的 .class img: { max-width: 100%;}。我通过这样写来解决我的问题：.class a: { max-width: 100%;}。 - raiderrobert

在我看来，在这种情况下（max-width:100%），它应该像图片不存在一样布局页面，然后将图片的宽度设置为其所在元素的宽度。对我来说，这就是语义上的含义，并且Safari、Chrome和IE Edge似乎也是这样处理的。 - Solmead

Answer 2

我的解决方案有两个步骤。它能够解决其他建议无法解决的问题。它仅适用于Firefox浏览器，使用了旧的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

- atwixtor