ブラウザのサイズを変更するときにコンテンツが飛び上がらないようにするにはどうすればよいですか？

Question

画像のキャプションと内容は画像によって保持されます。ウィンドウのサイズが変更されるかイメージが読み込まれると、ページの内容が上にジャンプし、再び下にジャンプします。

このようにコンテンツが移動しないようにすることはできますか？

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

はクリスFerdinandiのクラーケンCSSフレームワーク上に構築された

https://codepen.io/atoms/pen/bRdLVeを参照してください。

これはトリックを行うようだ：

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

と結果：あなたはページをリロードするとき ​​

今すぐテキストはイメージがまだロードされていない場合でも、所定の位置にとどまります。また、ブラウザウィンドウのサイズを変更して、同じ結果でコンテンツをリフローすることもできます。

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のアプローチは、より良いアプローチかもしれません。