是否仅使用CSS将Container div的大小自动调整为其内部img元素的维度

Question

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

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

#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}

仅供参考的是html元素：

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

到目前为止，我还没能找到任何css技巧，工作。我试着用"；适合内容"；在容器上，但似乎fit内容更多的是为了拉伸图像以适应容器，而不是相反，所以我使用了Javascript：

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

如果不需要的话，我宁愿不使用JavaScript，所以请告诉我是否有更简单的方法。。。

Answer 1

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

#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}

<div id="container">
<img src="https://picsum.photos/400">
</div>

Answer 2

好了，伙计们，我解决了…

我的css中有这个：

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

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

我感谢大家的回复。这很有帮助！非常感谢。

Answer 3

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

#container {
float: left;
background: pink;
}
#image {
width: 500px;
height: 300px;
padding: 20px;
animation: size 5s linear infinite alternate;
} 
@keyframes size {
from {width: 100px; height: auto;}
to {width:400px; height: auto;}
}

<div id="container">
<img src="https://static.toiimg.com/photo/72975551.cms" alt="pic" id="image"/>
</div>