调整div的大小以适应图像尺寸

Question

通常，我会使用background-image根据图片的宽度和高度属性来调整图片到div中。现在我遇到了完全相反的问题。

我想做的是根据图片的最大宽度和高度来调整div的大小。比如说，如果图片是200x200，那么div的大小必须调整为这个大小，但如果图片超过了300x300，它必须受到限制。

你有任何想法应该怎么做吗？

- domoindal

---

确认一下，背景图片使用background-image还是img标签？ - Fewfre

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>

- Niet the Dark Absol

---

你能否更改“position: absolute”以获得居中的图像？ - FaCoffee

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>

- meneerfab

---

问题是我正在使用background-image将图像放置在div中。 - domoindal

https://dev59.com/6HRB5IYBdhLWcg3wgXdV - meneerfab