PDA

View Full Version : Stretching and Shrinking a specific image



AndyArmstrong
Aug 15th, 2007, 11:37 AM
Hi.

http://www.3genergi.co.uk has a large image at the top of the logos and some boilers. This looks good and doesnt stretch at anything over 1024x768. However i want it to shrink to meet the width of the page , well slightly less than the width of the page actually.

Is this possible? It would also just need to grow again for the higher resolutions.

Please help

Andy

VIPStephan
Aug 15th, 2007, 12:34 PM
It’s possible if you set the size in percent. For example:

<img class="parchleft" width="80%" height="50%" …

However, note that it might become pixelated in higher resolutions if scaled bigger than the original.

AndyArmstrong
Aug 15th, 2007, 12:55 PM
Thats looking great - however if you now refresh the page, you get a strange pug looking version of that image filling the screen for about half a second before the rest of the page is loaded. Once the page has loaded it all looks great!

Any tips on fixing this?

AndyArmstrong
Aug 16th, 2007, 10:59 AM
lol?? Does anyone else see this problem whn loading the site! Its a bit silly, must be a way to stop it!

Andy!

AndyArmstrong
Aug 17th, 2007, 10:49 AM
anyone?

garydarling
Aug 17th, 2007, 03:48 PM
I saw it when I loaded it in IE, caught me by surprise. You might try adding max-height and max-width values in pixels to your css, see if that helps.

Your page is looking better all the time!

Gary

AndyArmstrong
Aug 17th, 2007, 03:58 PM
hmm how.

My css file you will be waning to look at i think is:

http://www.3genergi.co.uk/themes/default/basic.css

garydarling
Aug 17th, 2007, 04:24 PM
Add this in your default.css file (about mid-way down):


#top-menu {
background-color : #ADB583;
color : black;
max-height:286px;
max-width:230px}

No guarantees, but when I tried it in my test page it seemed to work.

Gary

Edit: Actually, change the pixel values to your maximum, not the samples I show.

GD

AndyArmstrong
Aug 17th, 2007, 04:44 PM
changed to max-height:186px; and max-width:1296; but didnt work :S

VIPStephan
Aug 17th, 2007, 04:50 PM
What’s this?


#top-menu {
padding: 0px 0px 0px 0px;
height=5%;
text-align: left;
margin-bottom: 12%;
}


Correct that and try setting an absolute size because I suspect the image’s percent values are counted for a parent before the entire page has loaded.

And while you’re at it: validate your code (HTML & CSS). And to help you a little I encourage you to put all that crap in the head section into external files. Helps to keep the code clean and short.

AndyArmstrong
Aug 17th, 2007, 05:35 PM
will do it if I have time :

what css file was that in ? basic or default :s.

I dont like setting absolute widths because it needs to scale to different resolutions.