CODEWITHSUNDEEP
javascripthtmlcsstransform
caiocpricci2
caiocpricci2

Reputation: 7798

Scaling an image doesn't work as expected?

I'm scaling an image down using the scale transform. That's working fine, except that the original image size is used to calculate the page size so I get horizontal/vertical scrolls in a huge empty page. I am a bit confused on how this works, isn't the scale supposed to reduce/enlarge the image?

Can I somehow get rid of the "extra" space not used? I don't need a CSS only solution, using javascript here is perfectly fine.

Fiddle: http://jsfiddle.net/kcYCm/

EDIT

@jgv solution posted below does size the image properly, but it doesn't solve the issue with scaling.

If we try using that approach, and instead try to scale the image up we get a funny effect. It zooms in only in part of the image and the scrollbars are displayed again. So when the image is scaled down it doesn't affect the other but when it's scaled up it does? Is this expected?

Fiddle: http://jsfiddle.net/kcYCm/6/

Upvotes: 2

Views: 139

Answers (1)

jgv
jgv

Reputation: 436

Try wrapping the image in a div and specifying the dimensions of the wrapper. No CSS3 but it works.

<div style="height: 300px">
  <img src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Les_Invalides_de_Paris_ceiling_huge.jpg" style="max-height: 100%; max-width: 100%"/>
</div>

Example: http://jsfiddle.net/kcYCm/5/

Upvotes: 1

Related Questions