要素の幅をいろんな写真の幅に合わせたい。

仮にDiv領域として、画像とその説明文が入るとします。
画像の幅も説明文の文字数もバラバラだとします。
Div領域の幅を写真の幅に合わせ、文章の方は適宜自然に
改行されるようにしたいのですが、何かいい方法はないでしょうか。

width:fit-contentにすると、画像の横幅より文字の方が長くなると、
Div領域の幅が文字の長さに合わされてしまいます。
画像の幅がそろっていれば、その画像の幅でDiv領域の幅を決めればいいのですが、
画像の幅がいろいろあるので、それごとにClassやIDを多発するのも気が引けます。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2022/07/25 22:05

こんばんは

全体のレイアウトをどうしたいのかが不明ですけれど・・

とりあえず、ご質問の部分だけに限って考えるなら、画像はある程度の幅があるものと仮定して、画像幅を優先して包含要素の幅が決まるようにしておけばよさそうです。

例えばこんな感じではいかがでしょうか。
（要素の高さは、画像の高さと文字列の長さで決まります。）

.wrapper {
display: inline-block;
width: min-content;
}

<div class="wrapper">
<img src="./A.jpg" />
<p>適当な説明文適当な説明文適当な説明文適当な説明文適当な説明文適当な説明文適当な説明文適当な説明文適当な説明文</p>
</div>

この回答へのお礼

ありがとうございます。思い通りになりました。ちゃんといろんなプロパティやその内容を勉強しなければなりませんね。己の勉強不足を痛感しました。

お礼日時：2022/07/25 22:15