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

Recommended Answers

All 7 Replies

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

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?

they already look poor

Member Avatar for fatihpiristine

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

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%}

perfect - thanks!

perfect - thanks!

Thanks for thanks, please mark thread as solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.