Cakers Cakers - 9 months ago 41
CSS Question

Keeping images inside of boxes when responsive

I am trying to make my picture stay inside of the grey box that I have it in. However, every time I try and resize the browser the picture pops out of that area. If anyone has any ideas as to how I can keep the picture inside of that box that would really help! Thanks! I wanted to add a Jsfiddle but since it has to do with pictures it doesn't show up and wouldn't help. Sorry about that...

Here's a picture of the issue:

enter image description here



<div id="box">
<h1> GCOM 366</h1>
<section class="clearfix" id="primary">
<div class="imgbox2">
<img class="adjustable" src="RDesign3.jpg" alt="example web page" width="300" heigh="300" >
<h2> Benefits</h2>

<p class="side">
1. Learn industry standard programs
2. Build Portfolio
3. Increase collaboration skills
4. Become more creative
5. Understand good layout
6. Feel confident in HTML/CSS




color: white;


width: 85%;
margin-left: auto;

margin-top: 35px;



float: left;
margin-right: 10px;
margin-left: 10px;

Answer Source

To make images responsive, add this style for all images:

img {
width: 100%;
display: block;

And you don't even need to float it and it will be nothing to clear then. Just add left, right margins to img parent container, in your case .imgbox2 Demo: