如何在调整浏览器大小时防止内容跳跃？

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>

Answer 2

这取决于您是否将拥有一致的图像大小。如果你的图片在那个地方总是相同的大小，你可以在图片(甚至你的档案div)上设置图片大小的CSS高度，这将在图片加载之前在页面上创建一个空间，防止跳转。

.profile img { height:250px }

如果您的图像大小不同，并且您需要避免失真，那么像这里也提到的JS方法可能是更好的方法。