0

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?, 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

Community
  • 1
  • 1
jennetcetera
  • 849
  • 1
  • 10
  • 18

2 Answers2

2

this css rule here: 

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

You are specifiying a width on the parent container of the image. Change it to max-width instead of width.

Kristy
  • 323
  • 1
  • 6
  • hmm changing "width" to "max-width" on that container didn't do anything – jennetcetera May 24 '13 at 17:26
  • actually, this did not work for firefox - only chrome and safari. is there something i need to add to make it work in firefox too? my client primarily uses firefox, so it must be compatible. – jennetcetera May 24 '13 at 17:40
  • Do you have a demo site? There might be another element with a fixed width throwing things off. – Kristy May 24 '13 at 18:29
  • hi @kristy thanks for your patience, i got busy this week and haven't been able to work on the site until now. here is a page that i have that you can look at. i removed the css rules suggested above for now because it was messing up in firefox, but maybe you can get an idea: http://www.mauguerrero.com/chivas-regal-2/ – jennetcetera May 31 '13 at 00:42
  • hi @ kristy - thanks for the help. i figured out my firefox issue. in addition to having max-width:1000px, i also had to add width:100%. not sure why that had to be defined for it to work in Firefox, but it did! – jennetcetera May 31 '13 at 01:50
0

Here is an javascrpt-free, crossbrowser-stable solution you are looking for. I have implemented it in past on that website: http://www.gardinenhaus-morgen.de/.

HTML:

<html>
    <body>
    <div id="page-wrapper">
        <div id="inner-wrapper">

        <!-- your content here -->    

        </div>
    </div>
        <div id="bg">
           <div>
               <table cellpadding="0" cellspacing="0">
                   <tr>
                       <td>
                           <img alt="background" src="<bild>" />
                       </td>
                   </tr>
               </table>
           </div>
        </div>
    </body>
</html>

CSS:

#bg div
{
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}

#bg td
{
    vertical-align: middle;
    text-align: center;
}

#page-wrapper
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 70;
    overflow: auto;
    width: 100%;
    height: 100%;
}

#inner-wrapper
{
   margin: 30px auto;
   width: 1000px;
}