1

代码在这里：

    <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 中，浏览器采用标准的 1024 像素高的图像，并且不会将其缩小到浏览器窗口高度的 100%。我知道这是一个很常见的问题，但我似乎无法将我的代码改写成正确的效果。

有人愿意为我转移它吗？

4

2 回答 2

0

刚看到你的网站，我想浏览器下面还有图片，我想你可能需要添加position:relative; 到 .entry-page-image

于 2013-06-12T05:16:11.383 回答
0

这里的问题是，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/

于 2013-06-11T16:26:04.517 回答