在HTML网页中，添加图片是一个常见的操作。 如何让图片适合盒子大小，成为了网页设计的一个难点。 下面介绍几种方法：

1. 使用CSS样式表进行设置

      .box{
        width: 200px;
        height: 200px;
        overflow: hidden;
      }
      .box img{
        width: 100%;
        height: auto;
      }
    

在父级盒子设置宽度和高度，并设置溢出隐藏；在图片设置宽度为100%，高度自适应。 这样，即使图片比盒子大，也会自动缩小到适合盒子。

2. 使用HTML宽度和高度属性

      <div style="width:200px;height:200px;overflow:hidden">
        <img src="pic.jpg" width="100%" height="auto">
      </div>
    

将图片放在父级div内，并设置div宽度和高度；在img标签上设置宽度为100%、高度自适应属性。 同样可以达到效果。

3. 使用background-image

      .box{
        background-image:url(pic.jpg);
        background-size:contain;
        width:200px;
        height:200px;
      }
    

使用background-image可以直接将图片放入背景中。 在父盒子设置宽度和高度，使用background-size设置为contain，使图片适应父盒子大小。