Keeping a containing div the size of its image
<p>I have a square image inside of a containing div, and want the containing div to have the same dimensions as the image. The size of the image varies and is thus not known in advance. Note in particular that the image is the only thing inside the div (well, not strictly true, but the other element is absolutely positioned and thus can basically be ignored).</p>

<p>The code I currently have is as follows:</p>

<pre class="lang-css prettyprint-override"><code>div.container, image {
    display: block;

    /* ensure enough room for other content in sidebar */
    max-height: calc((100vh - 12em)/2);

    /* don't allow image to escape sidebar boundaries */
    max-width: 256px;

    /* forces image to be square as it's originally square */
    width: auto; 
    height: auto;
}

div.container {
    position: relative;
    margin: 1em auto;
}
</code></pre>

<p>I've seen some posts about using <code>padding-bottom</code>; while that does make the containing div a square, it's not necessarily the same size as the image, since the height of the image can be forced to be much smaller than the height of the div. </p>

<p>Are there any clean solutions to this?</p>