이미지를 브라우저 창에 완벽하게 맞추는 방법은 무엇입니까?

<code class="html"><div class="imgbox">
    <img class="center-fit" src="pic.png">
</div></code>

<code class="css">* {
    margin: 0;
    padding: 0;
}
.imgbox {
    display: grid;
    height: 100%;
}
.center-fit {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}</code>

<code class="html"><img class="center fit" src="pic.jpg"></code>

<code class="javascript">function set_body_height() {
    $('body').height($(window).height());
}
$(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
});</code>

<code class="css">* {
    padding: 0;
    margin: 0;
}
.fit {
    max-width: 100%;
    max-height: 100%;
}
.center {
    display: block;
    margin: auto;
}</code>