By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,775 Members | 1,399 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,775 IT Pros & Developers. It's quick & easy.

Resize an image to work perfectly in various resolutions?

P: 14
Does anyone know how to resize an image to still look and fit perfectl in different resolutions?
Also how to align text to the righthand corner of my header image:

http://homepage.eircom.net/~egoman/leocss1.html

Thanks,
Leo
Oct 10 '06 #1
Share this Question
Share on Google+
3 Replies


jaymanson
P: 29
Say, for example you wanted to have an image which filled the whole screen without being cropped or repeated regardless of screen size:

The HTML would onyl need a div wrapper with the image inside...
Expand|Select|Wrap|Line Numbers
  1. <div id="wrapper">
  2.  
  3.    <img src="image.jpg">
  4.  
  5. </div>
And the CSS...
Expand|Select|Wrap|Line Numbers
  1. #wrapper {
  2.     width: 100%;
  3.     height: 100%;
  4. }
  5.  
  6. #wrapper img {
  7.     width: 100%;
  8.     height: 100%;
  9. }
In this example, the div wrapper is set to be 100% of the screen. The image inside is set to be 100% of the wrapper size, so as you change the screen size, the wrapper size changes as does the image inside. Obviously, you'll want to use an image to suit the largest resolution as this can be shrunk down - using a small image will look crappy when enlarged!

It's all about using percentage widths - not fixed widths. Experiment with this to get fluid layouts which look good at any resolution.

The easiest way to align your text with an image would be to put the image in the same div as the text. This will give you easy control over how they both sit together.

- Jay
Oct 11 '06 #2

P: 14
Hi Jay,
thanks for the reply buddy!
I'll give that a shot now - could you plz be more specific about aligning text either with my code or an example of yours?
Thanks,
Leo
Oct 11 '06 #3

P: 14
OR - align text to the right of other text? EG 1 part of the text is aligned to the left, the other to the right?
Oct 11 '06 #4

Post your reply

Sign in to post your reply or Sign up for a free account.