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

Question

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

P粉008829791 · Answer

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

リーリー

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

リーリーリーリー

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

P粉030479054 · Answer

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

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

リーリーリーリー