へーと思ったのでメモ。

display:none の時のimgサイズは 0*0pix になる

f:id:azix:20180619150505p:plain

表示中のサイズ

f:id:azix:20180619150953p:plain

非表示中のサイズは0になる

ソースはこんな感じ

<body>
    <div class="wrap">
        <button id="item">さーばる</button>
        <button id="reset" style="display: none;">もどす</button>
        <div style="margin-top: 1em;">
            <img alt="さーばる" src="animal_serval.png" style="display: none; height: 30%;">
        </div>
    </div>
    <script>
        $('#item').click(function () {
            $(this).hide();
            $('img').show();
            $('#reset').show();
        });
        $('#reset').click(function () {
            $(this).hide();
            $('img').hide();
            $('#item').show();
        });
    </script>
</body>