Automagically resize images?

[daviddoria]

Is there anyway to get images to be the "correct" size - i.e. fit the width of the text?

This is what currently happens:
http://engineeringnotes.net/personal/pictures.shtml

Thanks,

Dave

[almostbob]

those are the actual sizes of the images, not the desired size

<div id="main">
<h1>Pictures</h1>
<img width='594' height='292' alt='alt text is a requirement' src="Pictures/3DIM_poster.jpg" />
Poster presentation at 3DIM 2009.
<img width='594' height='612' alt='alt text is a requirement'  src="Pictures/scanner_inside.jpg" />
Leica HDS3000 LiDAR scanner in the lab.
<img width='594' height='612' alt='alt text is a requirement'  src="Pictures/scanner_outside.jpg" />A day of scanning in Troy.
</div>

I just pulled the sizes off the smallest image, and resized the others by proportion 730*752 > 594*612

its not a good idea to use html to resize images to suit the layout
actually resize the images with Irfanview, paintshop etc,
and serve them the correct size, (still with the sizes specified in the xhtml) smaller images = faster load times

notes
1:: the layout sucks, fixed width central column may look good on your pc,
mine is 2400px wide, what a waste of space
Ems and % are the dimensions of choice, width will adjust to screen and window size, keeping the same proportion as your design screen, on a wider range of systems
2:: incidental; the only bugs in the code is the missing alt tags in those images

[daviddoria]

I agree about the layout. However if I let the page expand to the screen width then the images specified in pixels will look too big/small unless the resolution is the same as my design resolution, right?

[almostbob]

they already look poor

[fatihpiristine]

there is an event handler for img tags complete/oncomplete run a javascript

[Troy III]

Is there anyway to get images to be the "correct" size - i.e. fit the width of the text?

This is what currently happens:
http://engineeringnotes.net/personal/pictures.shtml

Thanks,

Dave

So you want them to be looking something like this (see attachment image)?
Add this line in your
CSS

#main img {width:100%}

[daviddoria]

perfect - thanks!

[Troy III]

perfect - thanks!

Thanks for thanks, please mark thread as solved.