Scaling a centered image with window size - css

Question

img.logo {
height: auto;
width: auto\9; /* ie8 */
left: 50%;
margin-top: -250px;
margin-left: -134px;
position: absolute;
top: 50%;
resize: both;
That's the code I'm using. It's a combination of resizing and centering, and yet it's only centering for some reason. I need the image to scale because, as it is currently, it's overlapping with an upper element of the page at very small browser sizes.

Answer 1

You can try using CSS media queries. Basically we define breakpoints based on screen width/browser width, and adjust the image widths accordingly.
img {
width: auto;
height: auto;
}
#media all and (max-width: 600px) {
img { width: 500px; }
}
#media all and (max-width: 500px) {
img { width: 400px; }
}
#media all and (max-width: 400px) {
img { width: 300px; }
}
#media all and (max-width: 300px) {
img { width: 200px; }
}
#media all and (max-width: 200px) {
img { width: 100px; }
}
See this example
Hope this can suit your needs
EDIT:
You could even combine the above suggestion with transform: translateX(-50%) translateY(-50%); to keep the image centered at all times. For instance:
img {
position: absolute;
left: 50%;
top: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#media all and (max-width: 600px) {
...
}
...
Here's an example

Answer 2

Use simple % for implementing the image width and height and the rest will take care automatically. The overlapping here I think is because the image is trying to maintain proportions with the auto attribute.
Or else you can try something like this in css
img.resize{
width:60%; /* Use either % or px*/
height: auto;
}