Image not resizing dynamically with window size - html

Question

I want an image with the size of 250x50px to resize itself (go smaller) according to the window size, in other words, make it responsive.
The #wrapper holds the content for the whole page. The #headerholds the image and the navigation bar.
I know this may be easier with the use of #media screenbut I am looking for a pure CSS approach.
Here is what I am currently using:
HTML:
<div id="wrapper">
<div id="header">
<div style="max-width:500px;">
<img id="logo" src="images/logo.jpg" alt="logo" href="#">
</div>
</div>
CSS:
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 100px;
min-width: 300px;
border-bottom: 1px solid black;
}
#logo{
float: left;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Answer 1

you have a few issues in your code,
don't use inline-styles,
put the border-bottom in child div of #header
no need for IE hacks
no need for a min-width here.
Note: I don't see why you need this image to get smaller, lets see, its 250x50, when the lower screen are 320px so already fits perfectly
here is a snippet
#wrapper {
width: 100%;
border: dashed red 1px
}
#header > div {
max-width: 500px;
border-bottom: 1px solid black;
}
#logo {
max-width: 100%;
height: auto;
display: block
}
<div id="wrapper">
<div id="header">
<div>
<img id="logo" src="//placehold.it/250x50" alt="logo" />
</div>
</div>
</div>

Answer 2

First off, using #media screen is a CSS approach. But if you don't want that, you can just relative units like em or % and give a min-width:
#logo {
width: 20%;
min-width: 100px;
}
thing is, you already put some limits by setting the header to min width 300px and the div inside to max width 500px, so if you want to have more flexibility with those as well, consider different units too.