不定形のサイズのimgタグに、divタグのサイズを合わせる方法

   <div id="picture_area">
    <img id="picture_data" src="sample.jpg" >
    </div>

サイズが不定形のimgタグに、その上位のdivタグのサイズをあわせたいです。
つまり、imgタグの上にdivタグをぴったり重ねたいのです。
可能な限りHTML・CSSのみで解決できれば良いのですが、不可能ならJavascriptも使用致します。
宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

質問者さんが想像する動作は以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .parent {
13            display: inline-block;
14            background-color: #ffdb00;
15        }
16
17        .child {
18            display: block;
19        }
20    </style>
21</head>
22<body>
23<div class="parent">
24    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image.png" class="child">
25</div>
26</body>
27</html>