Javascript 是否仅使用CSS将容器div的大小自动调整为其内部img元素的大小？

我有一种情况，我有一个div容器，里面有一个图像。图像是一种可变资产，因此我永远不知道图像的高度和宽度。我希望div容器始终适合图像的大小，然后添加一些填充。。。例如，如果里面的图像是200px乘以100px，那么容器应该拉伸到200px乘以100px，然后在其周围填充30px

下面是我正在使用的CSS示例。。（图像应垂直和水平居中于div内）：

仅供参考，这是html元素：

<div id="container"><img src="image.png"></div>

---

如果不需要的话，我宁愿不使用JavaScript，所以请告诉我是否有更简单的方法来实现这一点…

AFAIU，您的代码在没有JavaScript的情况下可以正常工作：

#容器{
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：红色；
边界半径：20px；
转换：转换（120px，54px）；
填料：钙（21px/2）钙（58px/2）；
}
#容器：悬停{
背景：粉红色；
}

---

如果我理解正确，这就是你想要的。无论图像大小如何，容器都将大20像素

#容器{
浮动：左；
背景：粉红色；
}
#形象{
宽度：500px；
高度：300px；
填充：20px；
动画：大小5s线性无限交替；
} 
@关键帧大小{
从{宽度：100px；高度：自动；}
至{宽度：400px；高度：自动；}
}

---

好了，伙计们，我解决了

我的css中有这样的内容：

#page img, #page div {position: absolute; border: 0;}

这导致图像具有绝对位置，从而将其从文档流中拉出。一旦我添加了位置：相对于img，它就开始工作了

---

我感谢大家的回应。这很有帮助！谢谢大家!

您是否尝试过显示：内联flex在图像周围有一个边距而不是容器中的填充？你的意思是div容器应该只有img的尺寸，但在它周围（外部）应该有“填充”-你的意思是一个边距吗？是的，你是对的。我刚刚意识到这是我的css中的一个问题。我在图像上设置了一个绝对位置，将其从文档流中拉出。它现在的工作与预期的位置：相对。谢谢你的帮助！：）

var container = document.getElementById("container"); 
container.style.width= container.querySelector('img').offsetWidth+"px";
container.style.height= container.querySelector('img').offsetHeight+"px";

#page img, #page div {position: absolute; border: 0;}