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 bounding box is capable to handle, but keep them to scale.

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

Won't keep the image to scale.

Answer 1

I don't know if there is a way to do this with just CSS. If you want to achieve something like this then you can use supersized

Alternatively, if you don't care about older browsers, you can look into the CSS3 background-size property. Specifically, I think that setting background-size: cover will do the trick.

Edit - I misunderstood. What you might actually want is background-size: contain, but the downside is that you probably will have to change your html markup, not just your css.