I am trying to make an image respond to the browser size, so that when the browser is smaller, the image responds so that there is no scrolling involved. I found a similar question here [How can I resize an image dynamically with CSS as the browser width/height changes?](https://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang), but I'm not able to make that solution work. What am I missing?

I'm including my code below - I am using Wordpress, so it puts a "p" tag around my image automatically, wrapping my image in a paragraph. Also, I'm not sure if I'm including too much code for this purpose, but I wanted to make sure it was all there in case there's an error in a strange place that could be causing the problem...

Here is my html:

```
<body>
<div id="pop_up_page">
    <div class="content_well_pop">
        <div class="content_pop">
            <div class="portfolio_workspace_9">
                <h2>Here's the Header</h2>
            </div>
            <div class="portfolio_workspace_8">
                <p>
                    <img src="heres_the_image"/>
                </p>
            </div>
        </div>
    </div>
</div>
</body>

```

Here's my CSS:

```
body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}

#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;

.content_well_pop {
left: 0;
width: 100%;
}

.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}

.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}

p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}

.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}

```

Thanks