Scale image with css to both width and height to scale

Question

The bounding box is approx 1000x600, and some images are 500x100, while some others are 400x100 (extreme examples). Now I\'d like to scale both up to the maximum size the bo

Answer 1

I was having difficulty with this until I read this thread (resize view width, preserve image aspect ratio with CSS), and the List Apart article (http://alistapart.com/article/fluid-images) and put it all together.

If your markup is like this...

...then simply stating

img {
    width:100%
}

should be enough because most modern browsers realise that most people, given a choice, don't want to change the aspect of their images. However, if your markup contains dimension attributes like...

...which, is meant to be better technique, then the markup will shine through the CSS keeping the image at fixed height but flexible width (urgh!) unless you tell it otherwise with something like...

img {
    width:100%;
    height:inherit;
}

...or...

img {
    width:100%;
    height:auto;
}

Both seem to work and force the image back into correct aspect.

I've just stumbled upon this problem myself (my WYSIWIG editor adds dims to images by default - I needed a simple solution or I needed to spend hours hacking JCE to stop this behaviour) and haven't yet tested it exhaustively but it should give you a good starting point if you're having the same issue as me.