使div与其中的图像大小相同

I have an div with the following code

我有一个div与以下代码

HTML:

HTML：

<div id='imgContainer'>
    <img src='/img/logo.png' id='imglogo'></img>
</div>

CSS

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

The problem is the users can edit the image size, colour and some other things, so I want the div to get bigger as the image get bigger. I want the width and height of the div to be 250px if the image is smaller than it, but to get bigger as the image gets bigger.

问题是用户可以编辑图像大小，颜色和其他一些东西，所以我希望div随着图像变大而变大。如果图像小于它，我希望div的宽度和高度为250px，但随着图像变大，我想要变大。

The solution can be in PHP, JavaScript, CSS or jQuery.

解决方案可以是PHP，JavaScript，CSS或jQuery。

7 个解决方案

#1

Try this:

尝试这个：

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

Fiddle

小提琴

Thanks to @ahren and @Mohsen

感谢@ahren和@Mohsen

#2

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

浮动div是否适用于您的布局？这将导致其宽度换行到包含的图像。

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.

如果需要清除它，请添加一个包含overflow：hidden的包装元素。

#3

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.

所以要么在你的div上使用float，要么手动使用display：inline-block。

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

这是一个例子：http：//jsfiddle.net/mxykW/

#4

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

php在这方面非常有用，因为它具有'getimagesize'功能：

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

#5

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

#6

use this code:

使用此代码：

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

#7

-1

Just try to do like this:

试着这样做：

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

#1