css - 如何根据包含的图像大小动态调整 Div 大小

Question

我在这里进退两难。我正在研究一个模态库，并将图像 css 设置为根据浏览器窗口调整大小。现在我需要一个 div 围绕它，以便我可以在其上放置一些文本或按钮。图像的大小调整得很好，但我无法根据图像大小设置包含的 div。我尝试使用红色边框来包含 div 但它失败了。请帮忙。这是一个小提琴，可以帮助您了解我想要做什么。谢谢。

这是CSS代码

    #imagePlaceholderContainer {
        border: 3px solid Red;

    }
     #imagePlaceholder {
        margin: auto;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
        max-height: 80%;

    }

这是完整的代码--> 小提琴

Answer 1

去掉position: fixed，否则你必须在父级上指定一个widthand 。height#imagePlaceholderContainer