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)
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.
Discussion
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.