divで設定した要素が横一杯に広がってしまう。短くしたい

Question

divで設定した要素が横一杯に広がってしまい、困っています。短くするにはどうしたらいいのでしょうか？希望としては既に設定してある画像と同じ幅にしたいのですが

Comments

[m.ts10806]

実際のコード、画面キャプチャがないと何とも言えません。
「既に設定してある画像」って何ですか？
自分だけが持っている情報が多すぎます。

Answer 1

display: inline-block

Answer 2

当該divを別のdivでwrapしてそれにdisplay:flexするとかでも善いかもしれません

Comments

[yambejp]

<style>
#wrap{background-Color:yellow;display:flex;}
#img{background-Color:lime;height:200px;}
#img:hover{opacity:0.5;}
</style>
<div id="wrap">
<div id="img">
<img src="https://placehold.jp/ff0000/00ffff/100x100.png?text=test">
</div>
</div>
<script>