load picture in Div without Stretch and Need Scaling also using CSS? - html

Question

Need help in to load image into div without Stretch and Do scaling as well but using CSS.
i have already try few Examples but they are not working. below are those examples,
.img-contain {
width: 550px;
height: 220px;
overflow: hidden;
}
.myimage {
min-width: 100%;
}
<div class="img-contain">
<img src="http://wallpapers111.com/wp-content/uploads/2014/12/Beautiful-Scene-Wallpapers-Hd-1.jpg" class="myimage" />
</div>

Answer 1

This is what your code is saying right now.
Your image will have a minimum width of the image-contain which is 300px wide.
If you want the image to scale as well as keep it's aspect ratio try this code out;
.myimage{
width:100%;
}
Don't set the width of the img-contain to be a fixed width if you want it to scale with the size of the webpage.

Answer 2

If you are wanting a minimum width I would suggest using a media query, then setting a max-width: 100%; and height: auto; or your image will be distorted. This will make your page responsive.
.myimage { max-width: 100%; height: auto;}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
}
}
That would be for mobile portrait. IPhone
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
}
}
Landscape and so on.

Answer 3

.myimage { max-width: 100%; height: auto;}
#media only screen {
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
}
}
#media only screen {
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
}
}