图像神秘忽略Firefox的最大宽度& IE [英] Image mysteriously ignoring max-width in Firefox & IE

问题描述

所以我试图显示图像尽可能大，没有裁剪任何屏幕尺寸。这意味着 height：100％; width：auto in landscape 和 width：100％;

我在放送大图片时，会使用足以填充视网膜iPad，所以几乎每个屏幕尺寸将缩放图像下来。它在每个浏览器和方向，除了Internet Explorer& Firefox在横向模式，让它们太大，几乎每个屏幕。

代码的相关位置是：

 
 code>< 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和（orientation：landscape）{
 #main {
 top：0; 
 display：blocks; 
 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 =点击翻转class =sponsor> 
 
< a href =＃class =img-link> 
< img src =<？php echo $ image [0];？> alt =class =feat-1style =display：block; /> 
< / a> 
 
< a href =＃> 
< img src =<？php echo kd_mfi_get_featured_image_url（'featured-image-2'，'post'，'full'）;？& alt =class =feat-2style =display：none; /> 
< / a> 
 
< / div><？php endif; ？> 
< / div><！ -  End div #content  - > 
  

我不太喜欢比IE9老，但理想的是想服务一切。然而，只要我可以服务IE9 +& Firefox我会很高兴。

哦，顺便说一下 - Firefox中的Inspector告诉我， width：100％



< >解决方案

你有 max-width：100％，但100％的什么？在父宽度，对吧？但是父类是一个内联块（with class =sponsor），其宽度未设置，因此其宽度取决于子项，特别是子项的首选宽度。

这个样式的布局在CSS规范中未定义。特别地，在这种情况下孩子的固有宽度取决于父母的宽度，父母的宽度又取决于孩子的内在宽度。请参见 http://www.w3.org/TR/CSS21/visudet.html

我推荐给你的< div class =sponsor> 一个宽度。这应该处理这个问题，我会想。

So I'm trying to display images as big as possible with no cropping on any screen size. This means height: 100%; width: auto in landscape and width: 100%; height: auto in 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.

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.

Oh, and by the way - Inspector in Firefox is telling me that the width:100% rule is being followed, but clearly it is not.

Many thanks in advance!

解决方案

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.

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-float for the relevant spec text and note all the "does not define" bits.

I recommend giving your <div class="sponsor"> a width. That should deal with the problem, I would think.

这篇关于图像神秘忽略Firefox的最大宽度& IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！