使div與其中的圖像大小相同

Question

我有一個div與以下代碼

HTML：

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

CSS

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

問題是用戶可以編輯圖像大小，顏色和其他一些東西，所以我希望div隨着圖像變大而變大。 我希望div的寬度和高度為250px（如果圖像小於它），但隨着圖像變大而變大。

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

Answer 1

嘗試這個：

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

小提琴

感謝@ahren和@Mohsen

Answer 2

浮動div是否適用於您的布局？ 這將導致其寬度換行到包含的圖像。

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

如果需要清除它，請添加一個包含overflow: hidden的包裝元素。

Answer 3

這將做的工作：

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;
}

所以要么在div上使用float，要么只使用display：inline-block手動。

這是一個例子： http ： //jsfiddle.net/mxykW/

Answer 4

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

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

Answer 5

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

Answer 6

使用此代碼：

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

Answer 7

試着這樣做：

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