图像移动响应设计

Question

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

如果有人对如何在缩放时正确保留div内的图像有任何想法，那将真的有帮助！谢谢！

这里也是我的Jsfiddle：https://jsfiddle.net/x1mn04p2/（我将img 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添加正确的填充。例如。