css - 我不能在 Firefox 中将此图像强制设置为 100%？

Question

代码在这里:

    <div class="entry-page-image">
        <div class="featured-image-container">
            <?php the_post_thumbnail('large'); ?>
        </div>
    </div><!-- .entry-page-image -->

受此 css 影响:

.entry-page-image { position: fixed; display: inline-block; top: 0; margin: 0 0 30px 30px;  margin-left: 260px; float:left; width: 100%; }

.featured-image-container { height: 100%; width: auto;  }

.featured-image-container img { height: 100%; width: auto;  }

但是在 Firefox 中，浏览器采用标准的 1024px 高图像，并且不会将其缩小到浏览器窗口高度的 100%。我知道这是一个很常见的问题，但我似乎无法重新表述我的代码以达到正确的效果。

有人想帮我换一下吗？

Answer 1

这里的问题是 .featured-image-container 上的 height:100%; 相对于容器的高度调整高度。

在这种情况下，容器的高度等于容器中内容的高度(图像的自然高度)。

如果您手动将 html,body 的高度设置为 100%，那么您会发现 div 的高度现在符合您的预期。

示例: http://jsfiddle.net/EyLHG/

html,body{
    height:100%;
}
.container{
    width:auto;
    height:100%;
    border:1px solid red;

}
img{
    min-height:100%;
}

更新

此外，将图像的宽度设置为 auto 将导致宽度为图像的默认宽度，而不是容器的默认宽度。将 width 设置为 100% 将解决此缩放问题:

示例: http://jsfiddle.net/EyLHG/2/