css - 将 div 调整为图像大小

Question

通常，我曾经根据使用背景图像的宽度和高度属性将图像调整为 div。现在我有完全相反的问题。

我想要做的是将 div 大小调整为图像，但具有最大宽度和高度。假设如果图像是 200x200，则 div 必须调整到这个大小，但如果图像超过 300x300，它必须受到限制。

知道我该怎么做吗？

Answer 1

您可以将max-width和max-height样式属性应用于图像元素。

根据您需要对包含元素执行的操作，这可能会起作用：

<div>
    <div style="position: absolute;">Element content here</div>
    <img src="image.png" style="max-width: 300px; max-height: 300px;" />
</div>

Answer 2

你的页面结构是什么？

我猜你会使用这样的东西：

<div id="container">
    <img src="img.jpg" />
</div>

<style>
    #container {
        display: inline-block;
        border:1px solid blue;
        max-width:300px;
        max-height:300px;
    }
</style>