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

【问题标题】：Image mysteriously ignoring max-width in Firefox & IE图像神秘地忽略了 Firefox 和 IE 中的最大宽度
【发布时间】：2013-01-11 02:27:03
【问题描述】：

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

我提供的图像大到足以填满视网膜 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 中的 Inspector 告诉我正在遵循 width:100% 规则，但显然不是。

非常感谢！

【问题讨论】：

标签： css internet-explorer firefox responsive-design max

【解决方案1】：

你有max-width: 100%，但 100% 是什么？父宽度，对吧？但是父级是一个未设置宽度的内联块（class="sponsor"），因此其宽度取决于子级，尤其是子级的首选宽度。

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

我建议给你的<div class="sponsor"> 一个宽度。我认为这应该可以解决问题。

【讨论】：

啊！是的，给<div class="sponsor"> 一个宽度解决了它。真的让我觉得 Chrome 和 Safari 从祖父母那里获得了宽度，但 IE 和 Firefox 没有。非常感谢！
Chrome 和 Safari 在被替换元素上按照最大宽度百分比线做一些事情，给它一个零最小内在宽度，然后内联块上的收缩包装算法给它一个宽度等于父母。至少据我所知，这就是 WebKit 在这种情况下所做的。
也解决了我的问题。谢谢！
这个建议也解决了我的问题。在我的例子中，父母是一个锚标签，所以我的结构变成了div.class > a > img，而我的css基本上是.class img: { max-width: 100%;}。我通过说.class a: { max-width: 100%;} 解决了我的问题
在我看来，在这种情况下 (max-width:100%) 它应该表现得像图像不存在一样布局页面，然后使图像成为它所在元素的宽度在。对我来说，这就是它在语义上所说的，也是 safari、chrome 和 ie edge 的行为方式

【解决方案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

【讨论】：