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

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

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

如果您手动将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/

Answer 2

刚刚看到您的网站，我认为图片仍然在浏览器下方，我认为您可能需要将 位置：相对; 添加到.entry-页面图像

我无法在Firefox中将此图像强制为100％？

2 个答案: