It would be necessary that you post your full CSS and HTML in order to give you a reliable answer which you really can rely on.

However, if you are using the CSS in the order that you posted it (media query rules first, then general rules) the answer is simple: The general rules will always overwrite the media query rules since the follow later and apply to all screen sizes. To avoid that, list the gereral rules first and then the media queries.

The solution to you problem is simple. To get the image to adjust properly, do the following.

1. Wrap the image a div or HTML5 figure (Set overflew property value
   to hidden)
2. set the image to always fit the wrapper
3. Image height or width should be 100%, while the other is auto
4. Adjust the the image wrapper at your desired break-point

Note: I believe that the reason for your issue is that the image is overlapping.

• Run the snippet in the full window mode, then adjust window width to see the code in action.

#image-wrapper {
width: 300px;
height: 300px;
overflow: hidden; /* Hide overlapping part of the imager */
border: 5px solid red; /* Just show that the image is controled */
transition: all .7s; /* Just to make the adjustment smooth */
}

#image-wrapper img {
width: 100%;
height: auto; /* Allows the image to adjust properly */
transition: all .7s;
}


/* Now see what happens when the device or screen is less that 601px */

@media only screen and (max-width: 601px) {

#image-wrapper {
width: 150px;
height: 150px;
margin: auto; /* This should position it in the center */
transition: all .7s;
}

}

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
<div id="image-wrapper">
<img src="https://i.stack.imgur.com/71WkH.jpg" />
</div>

Hey I have been trying to create media queries for a website I developed. I have encountered a problem where when I resize an image in my media queries, it adjusts the border, however the full image size stays the same.Example of this shown in this link.

For the first image on that page, I have used these CSS properties for media queries.

#working {
        float: left;
        margin: 0px auto;
        border: 2px solid #000000;
        width: 175px; 
        height: 175px;
        display: block;
}

For the non- media queries I have used this CSS code:

#working {
    float: right;
    margin: 10px 215px 10px 110px;
    border: 2px solid #000000;
    width: 350px; 
    height: 350px;
    display: block;
}