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

Fiddle

感谢@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;
}

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

7 个答案: