Scaling header/images?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
zarie

Scaling header/images?

Post by zarie »

Hi,

I was wondering whether it's possible to scale images, depending on the size of the browser window?

For example, on this page (which is a work in progress, obviously!):

http://freebsd.bitplantation.com/cmsmad ... t_the_vscc

The header is a combination of 3 separate images, which sit across the top just fine on a full sized browser window, but if I make the window a little smaller, they wrap, which I don't want. Is it possible for the images to scale down a little so that they still fit on one line, so to speak, in a smaller window?

Similarly, with the image on the left hand side of the main content, if the window gets too narrow, it sends it to the bottom of the page (under the main content) and I'd like for that image to scale as appropriate also.

Thanks for your help!

Regards,
Tracey Brown :)
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Scaling header/images?

Post by Dr.CSS »

You may try giving the images a % width without a height and that may scale them down, the reason for no height is so it will just scale that proportionally.

Since everything else is set to % and not the images when you change size the % for all else changes but they are still a set size so nothing else can adjust to them and vise versa.
mkhmer

Re: Scaling header/images?

Post by mkhmer »

May I request your the code to include Image into the header with % size scaling?

I am absolutely new to CMS Made Simple...

Thanks,
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Scaling header/images?

Post by Dr.CSS »

In the above page this is how the images are place in the header, I would move this to the CSS and then give the images a % depending on how big I wanted them to be...




tested Sorry but it won't work, must be some other way to get them to scale on the fly, will investigate and report back if I find it...
Locked

Return to “Layout and Design (CSS & HTML)”