テキストの幅を、動的にサイズ変更される画像/タイトルの幅に合わせるにはどうすればよいですか?

Question

このコードペンを参照してください: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

リーリー

親 div と 2 つの子 div (画像と説明) があります。ビューポートの高さに基づいて画像のサイズを変更します。つまり、幅は動的で応答性が高くなります。 JavaScript を使用せずに、対応する兄弟 div .description のサイズを画像の幅に合わせて変更するにはどうすればよいですか?

言い換えれば、どのように変換すればよいでしょうか:

これを入力してください:

Answer 1

画像の幅を 100% に設定するだけです。次のようにテストするには、img スタイル タグに「width:100%;」を追加するだけです:

リーリー

またはクラスに入れます:

リーリー リーリー

"display: block" は、幅に関係なく、img が常に独自のブロック内にあることを保証するだけです。つまり、テキストはその横には表示されず、その下または上にのみ表示されます。

Answer 2

コンテナを inline-block (または table、inline-grid、inline-flex など、ぴったり収まるように縮小する構成) にします。 、float、absolute など) を使用すると、テキストの幅が 0 に強制され、画像 (テキスト) によってコンテナの幅が定義されます。幅には影響しません)、min-width

を使用して幅を再度 100% に強制します

リーリー リーリー