Logo and sitewide images refuse to be responsive - html

Question

I am creating a simple wordpress theme for this website and style.css applied on this site.
i want all images to be responsive. I tried this code.
img {
max-width: 100%;
height: auto;
}
It is not working unfortunately. If you try to resize the browser, the logo and the image is not resizing according to browser width (unresponsive).
How do i fix this?
Sorry for being so naive, been working on this for 2 days, still cant seem to find a solution for this simple problem.

Answer 1

Instead of max-width: 100%; try the following:
img {
max-width: 200px; /* Change this to what your logo is by its width */
width: 100%;
height: auto;
}
You can also set the max-width to be more than what your logo actually is, but of course it is suggested to keep it at high quality and in control.
EDIT: For sitewide images this of course does not work, since they all don't have the same width.

Answer 2

For image tag write this css
img {
max-width: 100%;
height: auto;
width:100%;
}
And if you are using bootstrap in your theme then write this css
img {
max-width: 100%;
height: auto;
width:100%;
display:inline-block;
}

Answer 3

You can wrap the images in a div, with a media query for true mobile. Here I made a version that's three images across and turn into stacked images on mobile, resizing along the way: Example is here
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
<div class="image-wrap">
<img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
And the CSS:
.image-wrap {
max-width: 600px;
width: 30%;
margin: 2% 0 0 2%;
overflow: hidden;
position: relative;
display: inline;
float: left; }
img {
width: 100%;
height: auto; }
#media only screen and (max-width: 767px) {
.image-wrap {
width: 96%;
max-width: 400px;
display: block;
float: none;
margin: 0 auto;
margin-top: 2%;}
}