このコードペンを参照してください: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0
リーリー
親 div と 2 つの子 div (画像と説明) があります。ビューポートの高さに基づいて画像のサイズを変更します。つまり、幅は動的で応答性が高くなります。 JavaScript を使用せずに、対応する兄弟 div .description のサイズを画像の幅に合わせて変更するにはどうすればよいですか?
言い換えれば、どのように変換すればよいでしょうか:
これを入力してください:
P粉9394737592024-02-04 14:17:48
画像の幅を 100% に設定するだけです。次のようにテストするには、img スタイル タグに「width:100%;」を追加するだけです:
またはクラスに入れます:
"display: block" は、幅に関係なく、img が常に独自のブロック内にあることを保証するだけです。つまり、テキストはその隣には表示されず、その下または上にのみ表示されます。
P粉0012064922024-02-04 00:02:48
コンテナを inline-block (または table、inline-grid、inline-flex などの任意の縮小構成) に設定します。 float、absolute など)、テキストの幅を phpcnc phpcn0 に強制して、コンテナの幅が画像によって定義されるようにします (テキストは幅に影響しません) )、次に min -width を再度使用して幅を 100%