画像がロードされる前にdivの高さを設定する

Question

これはちょっと説明しにくいです。がんばります。

divに読み込まれる動的イメージがあります（フィード内のInstagramイメージを考えます）。画像は画面のサイズに応じて拡大または縮小します（応答性）。私は幅を100％に設定し、高さは自動です。問題は、divの高さは、画像がdivで展開されるまで何もなく、画像と一緒に展開されることです。もしdivが（画像が入っているボックス）がページの読み込み時に正しい高さにセットされていて、画像がダウンロードされたり、divに書き込まれたりするなら、私はそれを望みます。希望の結果は次のようになります。ページの読み込み時に、すべてのサイズが適切に設定されたボックスのフィードがあり、画像が読み込まれると、それらのボックスに画像が埋められます。

私のdiv CSSは次のとおりです。

padding: 0 10px 0 8px; 
box-sizing: border-box; 

私のイメージCSSは次のとおりです。

width: 100%; 
height: auto; 
border-radius: 18px; 
border: 1px solid #eeefef; 
background: #eee; 

Answer 1

いいえ、あなたは画像サイズを知らなくても、画像へのdivのサイズを設定することはできません。 divの高さと幅を一定にしてみてください。