Resizing images to fit different resolution?

[le007]

Does anyone know how to resize an image to still look and fit perfectl in different resolutions?
Also how to align txt to an image:

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

Thanks :cool:

[WebJoel]

In your URL, you are attempting to right-align a HEADER tag. <h> is a block-level element, -you will not be able to have an image float left or float right of this.
You CAN however, have two DIVs with "float:left;" on both, image in the left-DIV, <h></h> in the RIGHT DIV and achieve your objective that way.

Easier though, is putting the image 'inline', here with <p> text, like this:

<div style="width:300px; margin:25px; padding:25px 9px; border:1px dotted gray;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy.
<img alt="img #1: float left" src="images/thisImage.jpg" style="width:75px; height:100px; border:1px solid black; margin:6px; float:left;" /> Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus.
<img alt="img #2: float right" src="images/thisImage.jpg" style="width:75px; height:100px; border:1px solid black; margin:6px; float:right;" /> Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus.</p>
</div>

[le007]

Hey Joel,
thanks for the reply - I changed the display to inline for my h4 element.
Also mate do you know t inline? How to resize images to they look well in different resolutions?

[discus]

Here is the fine solution provided by mark_yieh:

<table width="100%" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td width="20%">
<img src="nameOfImage.jpg" width="100%" />
</td>
</tr>
</table>That way the td tag is 20% of the table tag and the img tag is 100% of the td tag which makes it also 20% of the table tag. If you don't specify a width for the img tag, then it's going to take on the full size of the image and take up whatever space is needed to display that image.
It works perfect in FF (means, if you put a different column(cell) widths(in%) within a table(row), and then give 100% to each image (within the each cell), FF does it excellent.
But(as we could expect) IEtrash doesn't arrange cells well by their % width, but gives appropriate size only to the biggest(%) cell, and the rest of them become equal sized (which leads to unwanted size change of their images too).

To avoid this, you should give the same size for all (picture containing)cells in a row (columns in a table), and put different image sizes(%) in an img tag of each image.
Something like this:
<table width="100%" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td width="30%">
<img src="nameOfImage1.jpg" width="80%" />
</td>
</tr>
<tr>
<td width="5%">&nbsp;</td>
</tr>
<tr>
<td width="30%">
<img src="nameOfImage2.jpg" width="100%" />
</td>
<tr>
<td width="5%">&nbsp;</td>
</tr>
</tr>
<tr>
<td width="30%">
<img src="nameOfImage3.jpg" width="55%" />
</td>
</tr>
</table>

[le007]

Thanks buddy I'll give that a go!

Do you know how to align text to the right of other text? EG 1 part of the text is aligned to the left, the other to the right?

[discus]

Oops, i must clarify something:
it is (of course) not necessary to put different(%) sizes in img tags.:)
You can give them any % size you want. I meant, that way you can arrange your images of different (original) sizes to achieve desired layout.

As for the second Q, i don't understand what should be in between those 2 text blocks?

[le007]

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

In my site at the very top is WELCOME!
Underneath is right align text -

I want that on the same line as welcome only at the far right of it?

[discus]

I personally would use a table, but since you're trying to make a non-table layout, some of local css guys could help you about that.

[le007]

Yeah discus - I REALLY am considering going back to tables for the layout. Ppl always pointed out the bad sides - but mate I can't see any! I think css is fine for changing link colors and stuff like that but layout table is SO precise and looks fine in every browser! What do you think?

[bubs]

you might try a float:right and a high z-index. the adjust it with right:(#)%

just something I would try off the top of my head.

[bubs]

its right: (#)%,px,em,etc

and this is a problem I ran into recently too. like just now. I need the image to resize with the page.

[bubs]

another thought... If IE supported SVG (scalable vector graphics) would the vector graphic resize automatically?

[le007]

Thats the thing - I've read up on SVG but not sure?!
Thanks for the advice

[ray326]

Yes, SVG is about the only way to get good resizing other than maybe Flash.

[le007]

So what res is the best to design a site in? Whats the most common used res do you all think?

[bubs]

i've always been told 800 X 600... but I hate that. it always just seems so small

[discus]

Well le, i think the best way to go is to combine css with tables.

Css is really the best for separation of content and presentation, and imo it should be used widely.
On the other hand, tables still offer the best way for positioning things.
So why don't we use the both?:)
Look at this. (http://developer.apple.com/internet/webcontent/bestwebdev.html)(pay attention on "Pure CSS" and "CSS with Minimal Tables" subtitles)
And as someone said, it's sometimes not worth being purist.
After all, all those sites which promote use of css, don't completely exclude tables.


Greeting

p.s.
You should use 800x600, unless you want horiz scroll bar on 800x600 viewer's screen.

[le007]

Really 8x6!!! Thats tiny but ok I'll go with it - thanks for ur help - I'll get back to you when I change a couple of things around!