CODEWITHSUNDEEP
cssimagehtml
domoindal
domoindal

Reputation: 1523

Adjust div to image size

normally, I used to adjust an image to a div depending of it's width and height attributes using background-image. Now I have the exactly opposite issue.

What I'm trying to do is adjust the div size to the image but with a maximum width and height. let's say that if image is 200x200, the div must be adjusted to this size but if image exceeds the 300x300, it must by limited.

Any idea of how should i do it?

Upvotes: 3

Views: 13663

Answers (2)

meneerfab
meneerfab

Reputation: 59

What's the structure of your page?

I would guess you use something like this:

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

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

You can apply the max-width and max-height style properties to the image element.

Depending on what you need to do with the containing element, this might work:

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

Upvotes: 1

Related Questions