CSS 图片神秘地忽略了 Firefox 和 IE 中的最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14550356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image mysteriously ignoring max-width in Firefox & IE
提问by sanjaypoyzer
So I'm trying to display images as big as possible with no cropping on any screen size. This means height: 100%; width: autoin landscapeand width: 100%; height: autoin portrait.
所以我试图显示尽可能大的图像，而不在任何屏幕尺寸上进行裁剪。这意味着height: 100%; width: autoinlandscape和width: 100%; height: autoin portrait。
I'm serving up images that are big enough to fill retina iPads so pretty much every screen size will be scaling the images down. It does this fine in every browser & orientation except Internet Explorer & Firefox in landscape mode, leaving them far too big for pretty much every screen. This is only in landscape, mind you.
我提供的图像大到足以填满视网膜 iPad，因此几乎每个屏幕尺寸都会缩小图像。除了横向模式下的 Internet Explorer 和 Firefox 之外，它在每个浏览器和方向上都能很好地做到这一点，这使得它们对于几乎每个屏幕来说都太大了。请注意，这只是在风景中。
The relevant bits of code are:
相关的代码位是：
<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 -->
I'm not too bothered about older than IE9 but ideally would like to serve everything. However as long as I can serve IE9+ & Firefox I'll be happy.
我不太担心比 IE9 更旧，但理想情况下希望为所有内容提供服务。但是，只要我可以为 IE9+ 和 Firefox 提供服务，我就会很高兴。
Oh, and by the way - Inspector in Firefox is telling me that the width:100%rule is being followed, but clearly it is not.
哦，顺便说一句 - Firefox 中的检查员告诉我width:100%正在遵守规则，但显然不是。
Many thanks in advance!
提前谢谢了！
回答by Boris Zbarsky
You have max-width: 100%, but 100% of what? Of the parent width, right? But the parent is an inline-block (with class="sponsor") whose width is not set, so its width depends on the children, and in particular on the preferred width of the children.
你有max-width: 100%，但 100% 什么？父宽度，对吗？但是父级是一个内联块（class="sponsor"），它的宽度没有设置，所以它的宽度取决于子级，特别是子级的首选宽度。
The layout of this styling is undefined in the CSS specification. In particular, the intrinsic width of the kids in this case depends on the width of the parent which in turn depends on the intrinsic width of the kids. See http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-floatfor the relevant spec text and note all the "does not define" bits.
CSS 规范中未定义此样式的布局。特别是，在这种情况下，孩子的固有宽度取决于父母的宽度，而父母的宽度又取决于孩子的固有宽度。有关相关规范文本，请参阅http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float并注意所有“未定义”位。
I recommend giving your <div class="sponsor">a width. That should deal with the problem, I would think.
我建议给你<div class="sponsor">一个宽度。我想，这应该可以解决问题。
回答by atwixtor
My fix was two-fold. It worked when no other suggestions did. It uses targeting for FF only, the older width: 100%fix, and an additional experimental property.
我的修复有两个方面。当没有其他建议时，它起作用了。它仅针对 FF 使用定位、较旧的width: 100%修复程序和额外的实验属性。
To get it to work I did the following:
为了让它工作，我做了以下事情：
@-moz-document url-prefix() {
/* Firefox doesn't respect max-width in certain situations */
img { width: 100%; max-width: -moz-max-content; }
}
The magic bullet was the experimental -moz-max-contentvalue. Combined with width: 100%, it makes FF behave like Safari/Chrome's max-width: 100%;setup.
神奇的子弹是实验-moz-max-content值。结合width: 100%，它使 FF 的行为类似于 Safari/Chrome 的max-width: 100%;设置。
I found this out from the following source:
我从以下来源发现了这一点：
