Fix document width in relation to an image height

The image is 100% of the document width. I want the max-height of the image to be 2/3 of the screen height but to retain aspect ratio. When the image reaches this max-height, I want the document width to be fixed to the width of the image.

by deanmillar

HTML

<header>
    <div class="header-content"></div>
</header>
<div class="image-wrapper">
    <img class="image" src="http://designyoutrust.com/wp-content/uploads/2013/06/376.jpg" alt="pic" />
</div>
<div class="other-content">
</div>

CSS

header {
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
}
.header-content {
    height: 5em;
}
.image {
    width: 100%;
}

.other-content {
    height: 20em;
    width: 100%;
    background-color: black;
}

.image-wrapper, .image {
    max-height: 67vh;
}
    
body {
    max-width: 119.0525vh;
    margin: auto;
}