css - 如何防止调整浏览器大小时内容跳起来？

Question

图片标题和内容由图片固定。调整窗口大小时或加载图像时，页面内容会向上跳，然后再次向下跳。

是否可以防止内容以这种方式移动？

<div class="profile">
    <img src="http://lorempixel.com/g/720/720/nature" alt="" />
</div>

参见 https://codepen.io/atoms/pen/bRdLVe

基于 Chris Ferdinandi 的 Kraken CSS 框架构建。

这似乎可以解决问题:

.profile {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    float: left;
    height: 0;
    }
.profile img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    }   

结果: https://codepen.io/atoms/pen/jwbOYe

现在，当您重新加载页面时，即使图像尚未加载，文本也会保留在原位。您可以调整浏览器窗口的大小以重排内容并获得相同的结果。

不确定 CSS 是否完全正确，但它似乎有效。

Answer 1

首先，您可以在标题中添加一个类，如下所示:

<p class="image-caption"><small>Image caption</small></p>

然后在 CSS 中添加一个“隐藏”类:

.hidden {
  display: none;
}

然后使用jQuery来实现这个功能:

$(document).ready( function() {
    $(".image-caption").addClass("hidden");
    $(".profile img").on('load', function() {
      $(".image-caption").removeClass("hidden");
    })
});

注意:您需要在 HTML 代码中包含 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>