html - 图像移动响应式设计

Question

目前，我正在尝试学习移动设备的响应式设计。我遇到的问题是，当增加浏览器大小时，我的图像缩放得很好。但是，它们往往会超出包含文本的框。我会提供一张图片，以便您可以看到问题所在。

如果有人对缩放时如何将图像正确保存在 div 中有任何想法，那将非常有帮助!谢谢!

这也是我的 Jsfiddle:https://jsfiddle.net/x1mn04p2/ (我将 img css 放在顶部，将网站的其余 css 放在下面，这样我就可以看到完整的外观)

HTML:

 <section>

 <div id="box">
<h1> GCOM 366</h1>
<section class="clearfix" id="primary">
<div class="imgbox">
 <img class="adjustable" src="weblogo" alt="example web page" width="300" heigh="300" style="float:right">
 </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>




img.adjustable{
 width: 100%;
 max-width: 400px;
 max-height: 400px;
    margin: 1em 1em 1em 2%;
    }

Answer 1

图像的右边距使一切变得复杂。去掉它。例如，不是向 .imgbox 添加右填充。