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

You can set only width or only height to 100%. E.g.

img {
    width: 100%;
}

or

img {
    height: 100%;
}

That will preserve the image scale, but the image might overflow the container.

This might not work in all browsers, but it does in the latest versions of Firefox, Chrome and Opera. I've had weird experiences with this in the past and my solution was to calculate the new image size on the server.