在响应时将图像保持在盒子内

Question

我试图让我的照片留在我所拥有的灰色框内。但是，每当我尝试调整浏览器大小时，图片就会从该区域弹出。如果有人有任何想法。我想添加一个Jsfiddle，但由于它与图片有关，它没有显示，也无济于事。对不起...我怎么能把照片放在那个真有帮助的盒子里面。感谢。

以下是该问题的图片： -

    .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;
      }

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

Answer 1

要使图像响应，请为所有图像添加此样式：

img {
width: 100%;
display: block;
}

你甚至不需要漂​​浮它，然后就没有什么可以清除了。只需添加左边距，右边距到img父容器，在你的情况下.imgbox2演示： https://jsfiddle.net/gkaraliunas/n99rj9k9/

Answer 2

在图片标记

中添加width: calc(100% - 20px)

＆＃13;

＆＃13;

.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;
    width: calc(100% - 20px);
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

首先，从图像中删除内联宽度和高度属性：

    <img class="adjustable" src="RDesign3.jpg" alt="example web page" width="300" heigh="300" >

所以它只是：

<img class="adjustable" src="RDesign3.jpg" alt="example web page">

然后在样式表中，您可以设置宽度为100％，最大宽度为300px ......

.adjustable
{
    width:100%;
    max-width:300px;
}