CODEWITHSUNDEEP
cssimagescaling
Matt Welander
Matt Welander

Reputation: 8548

how to scale img by percentage of self and not percentage of its container

how to scale img by percentage of self and not percentage of its container?

I can't believe I never ran into this problem before, so I'm guessing either the standard changed, or I am doing something wrong, because I am pretty sure that back in the day, before CSS even, it was possible to scale an image like this

<img src="something.jpg" height="50%" width="50%">

but now that scales it by the container objects size, which is totally irrelevant to me.

IS there no other way than for me to start calculating pixels and such in a javascript to achieve this very simple image styling?

If I have an image 500px wide, and the user selects 50%, I want that image to show up 250px wide, I don't care one bit about the size of its container at this moment...

Upvotes: 3

Views: 1556

Answers (4)

Matt Welander
Matt Welander

Reputation: 8548

I ended up solving it like this (with javascript/jQuery): -Create a div -Insert the image -pick up the dimension from the image -set those dimensions to the DIV -set image dimensions to 100%

That way the image till initially be of original size, my jQuery resize() on the DIV will work and the image will always fill the DIV.

Upvotes: 0

Chris
Chris

Reputation: 183

Set the percentage size on the image, then use a wrapper around the image with position: absolute;

http://jsfiddle.net/KWWZz/

Some unfortunate drawbacks:

  1. This doesn't seem to work in IE7 (and as of the time of this posting, jsfiddle doesn't seem to be working for IE7 or IE8, so it's hard to really show that)
  2. Because you're using absolute positioning, you'll probably have to alter some parent container's positioning context to get it to work for any given situation.

Upvotes: 0

Roc Ho
Roc Ho

Reputation: 305

img use style="max-height:100%;max-width:100%;" will fill up container box but keep all image just inside container. use style="min-height:100%;min-width:100%;" will fill up container and clip if image have different size with container box.

not work for browsers dont support max\min-height\width (below ie7 I think).

Upvotes: 0

jgthms
jgthms

Reputation: 864

Try the CSS zoom property. I believe it works on Chrome, Safari, and IE, but not Firefox.

Upvotes: 1

Related Questions