Change image width by screen size

Question

I have some images that I want to add to my web(the image width should be as the screen width). the problem is that there are a lot of screen which means that there is a different between each one to another screen size/resolution. I tried to set the image width to 100% but in some cases it works great and in some case it distort it. Someone can please tell me the solution to this problem?

Answer 1

Set the img CSS to width: 100%; height: auto;

img {
    width: 100%;
    hegiht: auto;
}

DEMO