treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Image will not resize inside my div

  • I am making a responsive website, and would like for my images to resize inside the divs when the browser window is stretched. I just accomplished this successfully on the last site I made, seemingly using the same technique. However, it is not working this time. To make my images resize, i use a large enough image so that it will work full screen, and then shrink down when the browser window shrinks. So, when I enter the HTML, I leave out the height and width so that it will adapt to the size of its container. Please let me know if you see something I don't that would make this not work! The code I have for this site is below.

    HTML:

    image <div id="contentwrapper"> <div id="right"> <div id="imgdiv"><img src="images/sample.png"/> </div> </div> </div>

    CSS:

    contentwrapper {

    width: 90%;
    margin-right: auto;
    margin-left: auto;
    

    }

    content {

    padding-left: 260px;
    

    }

    right {

    float: right;
    width: 25%;
    

    }

    rightImgdiv {

    width: 90%;
    

    }

  • rightImgdiv img { width: 100%; }

  • That's it! How I missed that in my other code, I have no idea. Sometimes you just need fresh eyes :) Thanks!