Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Steen Sziegaud
Steen Sziegaud
6,445 Points

Why doesn't the image expand through the borders of the browser window?

In earlier courses I learned that I got to set the max-width property of an img in order to make sure the image doesn't expand through the borders of the browser window when it's too big. In this case you don't set any max-width properties so I wonder why the image is still adjusting to the browsers window size. I assume it behaves like this because it's a svg. Is that right?

1 Answer

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

You should be setting your original img tags to max-width 100%. By doing so your photo will never be larger than 100% but you still have to control the behavior elsewhere. You may just need a wrapper tag within your body to control how large the viewable area is...

ex:

<body>
 <div id="wrapper">
   <img src="" alt=""/>
</div>
</body>

img {
  max-width: 100%;
}

#wrapper {
  width: 300px;
}

In this case the image will be restricted to the width of the wrapper unless it is itself less than 300px.

If you image is say 400px, it can only be 300px because of the wrapper. and is contained

if your image is 200px, it will be smaller and not fill the entire 300px but will meet the max-width of 100%.

Hope that helps, if not please share your code.