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

Posted 2023-02-24

【中文标题】使 div 与其中的图像大小相同

【英文标题】：Making a div the same size as an image inside it

【发布时间】：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。

【参考方案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，我明白了，抱歉，他更快

加一个用于使图像成为块以消除底部的间隙。