Making a div the same size as an image inside it

Question

I have an div with the following code

HTML:

Answer 1

This will do the work:

div{
    border:1px solid black;  /* you can remove this */
    box-sizing:border-box; /* you can remove this */
    padding:13px;
    min-width:250px;
    min-height:250px;
    display:inline-block;
}

So either use float on your div or just use display:inline-block manually.

Here is example: http://jsfiddle.net/mxykW/

Answer 2

Try this:

div#imgContainer {
    min-width: 250px;
    min-height: 250px;
    padding: 13px;
    display: inline-block;
}

Fiddle

Thanks to @ahren and @Mohsen

Answer 3

Just try to do like this:

div#imgContainer {
    width: Auto;
    height: Auto;
    padding: 13px;
}

Answer 4

Does floating the div work with your layout? This will cause its width to wrap to the contained image.

div#imgContainer {
    min-width: 250px;
    min-height: 250px;
    padding: 13px;
    float: left;
}

If you need to clear it, add a wrapping element with overflow: hidden.

Answer 5

div#imgContainer {
    min-height: 250px;
    min-width: 250px;
    width: Auto;
    height: Auto;
    padding: 13px;
}

Answer 6

php is very usefull in this, as it has the 'getimagesize' function:

<?php
$size = getimagesize($filename);
$fp = fopen($filename, "rb");
if ($size && $fp) {
    header("Content-type: {$size['mime']}");
    fpassthru($fp);
    exit;
} else {
    // error
}
?>