只是不要设置图像的width，只设置max-width.
img {max-width:100%; height:auto}
(height:auto不是必须的，因为auto是默认值，但我把它放在那里是为了提醒自己，我希望图像有其自然的比例.)
此代码段有两个框，一个比图像小，一个比图像大.如您所见，小方框中的图像被缩小，而大方框中的图像具有其正常大小.
div {border:2px outset green; margin:6px 0}
.box1 {width:100px; height:70px;}
.box2 {width:200px; height:100px;}
img {max-width:100%; height:auto}<div class="box1">
<img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>
<div class="box2">
<img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>