Use CSS to make an image scale up and down

Question

I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?

Answer 1

No. Css cannot be used to scale an images at this point. An tag can do it, so you could emulate whatever css effect you are looking for with some img tags and a bit of javascript, but CSS alone cannot do it.

Answer 2

You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.

Answer 3

CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):

img {height: 100%;
    width: 100%;
    min-height: 600px;
    min-width: 800px;
    }

for example.

But...I think for it to react to the viewport resizing that JS would be probably your better-friend.

Answer 4

Percentages will keep an image the whole width, and will update the image on browser resizing.

If you want the image to always be stretch, you can use:

img {
    width:100%;
}

However, that can easily make the image look like total crap. A safer way might be:

img {
    max-width:100%;
}

Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.