...

View Full Version : css scaling images



verkeerd
04-06-2011, 10:44 AM
i've been trying to make my website look roughly the same for every screen resolution, but one problem i've been running into is the scaling of the images..

i've been using the code/style below and it does work, but only in firefox.. where it scales the width of the images down to 30% of the total window size,
in safari/chrome however it scales the images down to 30% of its original width.. which is something i don't want..

does anyone know of a solution to this?



.resize {
width: 30%;
height : auto;
}

.resize {
width: 30%px;
height : auto;
}

bullant
04-06-2011, 10:53 AM
Try removing the height styles. I don't think you need it.

In css, when you specify either a % width or height for an <img> it will size it to that % width or height of the img's parent element and the other dimesion will be sized automatically to maintain the original aspect ratio of the image.

It would help if you post your code so we can see what is happening.

BulletTimeBill
04-06-2011, 10:55 AM
The % size means it's 30% of the parent element. I'm guessing if it resized at all, it was just some firefox magic and that the parent element was expanding. Which is weird, the height and width of the parent need to be defined for it to work i thought. But anyway, it's a pretty commonly asked question, and you can't do it. Not with html or css anyway. I thought I saw somewhere you could do it with php, asp, some server side languages. But otherwise no.

alma111
04-06-2011, 02:10 PM
Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?

bullant
04-06-2011, 02:19 PM
Hello,

I am displaying an image on a few pages. The image size is 50 px
height and 50 px width.
In some pages I need the image to be 30x30 px in others 40x40 px and
in others 50x50px.

Can I scale the image using CSS?
yes you can


In css, when you specify either a % width or height for an <img> it will size it to that % width or height of the img's parent element and the other dimension will be sized automatically to maintain the original aspect ratio of the image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum