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

【问题标题】：Making a div the same size as an image inside it使 div 与其中的图像大小相同
【发布时间】：2013-12-13 02:58:34
【问题描述】：

我有一个带有以下代码的 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。

【问题讨论】：

标签： javascript php jquery css

【解决方案1】：

试着这样做：

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

【讨论】：

您实际上不需要指定width 或height，因为auto 值是默认值。仅在 div 继承样式的情况下。
是的，但是如果图像小于 250 像素怎么办。那么 div 必须保持 250px。
然后使用min-width: 250px;
图片比那个小怎么办？
我给了@Me123评论的可能性

【解决方案2】：

试试这个：

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

Fiddle

感谢@ahren 和@Mohsen

【讨论】：

为什么是display:inline？这是唯一阻止我支持这个答案的事情......方式应该是inline-block（如下所述） - 但它还应该附带一个免责声明，它在旧 IE 中不起作用。
必须是display:inline-block
我首先尝试了这个，因为它看起来不错，但是为什么你需要属性 display: inline-block？这是一种黑客行为吗？它仍然有效。
@Me123 因为没有inline-block div 宽度将根据容器宽度拉伸（对不起我的英语:)），尝试在小提琴上删除它，你会看到结果
@karaxuna 哦，我明白了。谢谢。

【解决方案3】：

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

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

【讨论】：

谢谢，但我无法测试它，因为我的 apache 不工作。

【解决方案4】：

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

【讨论】：

你不需要设置width和height auto。

【解决方案5】：

使用此代码：

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

【讨论】：

谢谢，但也和karaxuna的回答一样。

【解决方案6】：

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

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

如果你需要清除它，添加一个带有overflow: hidden的包装元素。

【讨论】：

【解决方案7】：

这将完成工作：

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/

【讨论】：

感谢 hRvoed，但@karaxuna 不久前已经回答了同样的问题。
Ups，我明白了，抱歉，他更快
加一个用于使图像成为块以消除底部的间隙。