Cakers Cakers - 14 days ago 6
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

HTML:

<section>

<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" >
</div>
<h2> Benefits</h2>

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


CSS:

.imgbox2{
width:100%;
display:block;


}


#primary{
background-color:#5E5757;
color: white;
}

section{


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

margin-top: 35px;



}

img{

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

Answer

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: https://jsfiddle.net/gkaraliunas/n99rj9k9/

Comments