CODEWITHSUNDEEP
jquerycss
mamgoo
mamgoo

Reputation: 79

Resize image inside a container?

To resize a image with the jquery function

$('div.container').resizable({ aspectRatio:true})

I put the image in a div like this:

.container { width:350px; height:auto; background-color:black}
.container img { width:100%; height:auto}

<div class=container>
    <img .../>
</div>

But as you can see here live http://jsfiddle.net/Gz4ts/ there is always a little border at the bottom.

How can I fix this?

Upvotes: 0

Views: 111

Answers (2)

Foreign Object
Foreign Object

Reputation: 1640

You should use max-width instead of width

  .container img { max-width:100%; height:auto}

Upvotes: 0

Adrift
Adrift

Reputation: 59769

But as you can see here live http://jsfiddle.net/Gz4ts/ there is always a little border at the bottom. How can I fix this?

Just add:

display: block;

To the <img>, as they're replaced inline elements by default

http://jsfiddle.net/Gz4ts/1/

Upvotes: 4

Related Questions