Attempting to keep image size coherent with different screen resolution

Problem

So I'm building a website, which is suppose to have an image slideshow I've set up a div for it:

<div id="slideshow">
</div>

with its corresponding CSS:

#slideshow {
    position: absolute;
    height: 28%;
    width: 99.9%;
    top: 10.5%;
    margin: 0;
}

I've been trying to find a proper image size to fit the div, so that it doesn't show up differently on different screens. I've tried finding an unnecessarily big image, so that it would "scale down" to the div using height: 100% and width: 100%

But it always turns inconsistent in the two screens I test, normally too stretched. One screen has a resolution of 1336x768 and the other 1920x1080. How can I keep an image from changing its ratio on different screens? (I think of a banner and how it's always consistent in every screen without stretching)

Problem courtesy of: AlexOlival

Solution

Typically when working with any kind of responsive design that will work across multiple screen resolutions you use the following.

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

This will also assure that the image keeps the correct aspect ratio.

Solution courtesy of: Hughes

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.