Html 使包含的div保持其图像的大小

我在包含div的内部有一个正方形图像，并且希望包含div的尺寸与图像的尺寸相同。图像的大小不同，因此事先不知道。特别要注意的是，图像是div中唯一的元素（虽然不是严格意义上的真元素，但另一个元素是绝对定位的，因此基本上可以忽略）

我目前拥有的代码如下：

div.container，图像{
显示：块；
/*确保侧边栏中有足够的空间容纳其他内容*/
最大高度：计算（（100vh-12em）/2）；
/*不允许图像脱离边栏边界*/
最大宽度：256px；
/*将图像强制为方形，因为它原来是方形的*/
宽度：自动；
高度：自动；
}
分区集装箱{
位置：相对位置；
保证金：1em自动；
}

我看过一些关于使用

填充底部的帖子；虽然这确实使包含的div成为正方形，但它不一定与图像大小相同，因为图像的高度可能会被迫比div的高度小得多

有没有干净的解决方案？
我能想到的最好的解决方案是父容器的
display:table
，图像包装的
display:table cell

下面是一个容器的简单示例，该容器与它所保存的图像具有相同的尺寸

（容器带有虚线边框）


*{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
填充：10px；
}
img{
高度：自动；
垂直对齐：顶部；
}
部分{
显示：表格；
}
.形象{
显示：表格单元格；
垂直对齐：顶部；
轮廓：5px点红色；
}
我能想到的最佳解决方案是父容器的
display:table
，图像包装器的
display:table cell

下面是一个容器的简单示例，该容器与它所保存的图像具有相同的尺寸

（容器带有虚线边框）


*{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
身体{
填充：10px；
}
img{
高度：自动；
垂直对齐：顶部；
}
部分{
显示：表格；
}
.形象{
显示：表格单元格；
垂直对齐：顶部；
轮廓：5px点红色；
}


div.container{
显示：表格；
}
div.container{
显示：表格；
}
只需进行分割，不给出其高度和宽度，并将图像放入内部，分割将根据图像的尺寸自动获取高度和宽度。
只需进行分割，不给出其高度和宽度，并将图像放入内部，分割将根据图像的尺寸自动获取高度和宽度。
将
.container
元素的
显示
属性设置为
内联块
，而不是
块
将
.container
元素的
显示
属性设置为
inline block
而不是
block
我不想使用Javascript，除非在CSS中没有办法做到这一点。我想你不能使用display:inline block或float它？所以你想要一个只包含图像并适合其大小的容器？如果是，那么这不意味着在图像中添加边框吗？@wizzardmr42-Ooh，内联块似乎可以工作；将需要一些调整来考虑一些副作用，但这似乎解决了困难的部分。谢谢@没问题。只要不需要旧浏览器的支持，就应该很好。你可以选择caniuse.com，我不想使用Javascript，除非在CSS中没有办法这样做。我想你不能使用display:inline block或float it？所以你想要一个只包含图像并适合其大小的容器？如果是，那么这不意味着在图像中添加边框吗？@wizzardmr42-Ooh，内联块似乎可以工作；将需要一些调整来考虑一些副作用，但这似乎解决了困难的部分。谢谢@没问题。只要不需要旧浏览器的支持，就应该很好。你可以查看caniuse.com它有什么作用？这有什么帮助？为什么不编辑代码片段以使其更可见？它的作用是什么？这有什么帮助？你为什么不编辑你的代码片段，让它更清晰可见呢？