動的サイズの画像/タイトルにテキストの幅を合わせる: ステップバイステップのガイド

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 など)、テキストの幅を phpcnc phpcn0 に強制して、コンテナの幅が画像によって定義されるようにします (テキストは幅に影響しません) )、次に min -width を再度使用して幅を 100%

に強制します

リーリー リーリー