resize container to image-size - html

Question

I have a container and would like to resize the height of this container according to the size of the image inside.
HTML:
<figure class="container">
<a class = "123">
<img class="item" src="...">
</a>
</figure>
CSS:
.container {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
}
.item {
width: 100%;
border-radius: 3px
}
Does anybody have an idea how I should go about this?

Answer 1

The following might do the trick, use display: inline-block for the figure container and get rid of the extra white space after the image with display: block.
The inline-block will give you a shrink-to-fit height and width around the image (and link in your case).
.container {
border: 1px dotted blue; /* for demo only */
display: inline-block;
}
.container img {
display: block;
}
<figure class="container">
<a class = "123">
<img class="item" src="http://placehold.it/200x100">
</a>
</figure>

Answer 2

<figure class="container">
<a class = "123">
<img class="item" src="...">
</a>
</figure>
.container {
position: relative;
min-width: 100%;
margin: 0 -10px 10px
height: auto;
overflow: auto;
}
.item {
width: 100%;
border-radius: 3px
}
The container will wrap itself around the image and adjust accordingly.

Answer 3

before you call the container you call which image you are going to use within the container, get the width and height of the image , now you know what you are going to use it so you can do inline styleing.
<?php
$img = "your image url comes here";
list($width, $height) = getimagesize($img);
echo"
<figure class='container' style='width:$width;height:$height'>
<a class = '123'>
<img class='item' src='$img'>
</a>
</figure>
";
?>