Hi!

How do I achieve this:

I have an image 1000 pixels wide. If the image doesn't fit on the screen I want the width to be resized bit by bit down to a minimum of 700 pixels.

You could set the width of the image element with javascript but that would simply squash the image NOT resize it.

Or you could try this

Thanks chrishirst!

I followed your link and looked into the example. The site suggests the following css class:

.resize {
width: 200px;
height : auto;
}

.resize {
width: auto;
height : 300px;
}

I don't understand how this works.

I want my 1000 pixel image to vary between 700 and 1000 pixels in width when resizing the window.

I want to show my 1000 pixel image on my blog. When people watch the blog with a 1024x768 pixel resoulution I want the browser to resize the image to 700 pixel width. When watching with higher resolution I want the image turn up with its original width, 1000 pixels.

1/ What about users with higher resolution but do NOT have their browser full screen?

2/ What about users such as myself who have two screens at different resolutions?

3/ There is no reliable cross-bowser method to detect when a browser window is resized.

Originally Posted by chrishirst

1/ What about users with higher resolution but do NOT have their browser full screen?

If my 1000 pixel image fits the screen, let it show up 1000 pixels wide.

If the 1000 pixel image doesn't fit in on the screen let it be resized in order to fit.

I am not sure am I understand your question right. Did you want resize image on fixed dimension and vary only between 700 and 1000px or you want to resize image on any screen width. If you want first solution try this (I didn't define height):

#header{
	max-width: 1000px;
	min-width: 700px;
}

#header img{
	width: 100%;
}

NOTE: this is not work in IE6

Thanks shivaji!

This was exactly what I wanted!

I inserted my picture into a div-tag which a styled like this:

<div style="min-width:700px; max-width:1000px; width:100%">

You can see the result here on my blog.

People with 1024x768 resolution will see the picture 700 pixels wide. People with higher resolution will see it 1000 pixels wide.

Great if this solution help you. BTW very nice blog and photos.