在一般设计中，插入图片有两种方式，一是在组件中添加background属性，一是通过组件。两种方式实现自适应的方式大同小异。
背景图适应大小
当外层容器的宽高比跟图片宽高比一致时到没啥问题，但在一些特定的业务场景，如九宫格图片展示时，展示的原始图片它们的大小，宽高比很有可能是不一样的，但外层容器的大小是固定的。此时如果按照上面的做法会导致图片被拉伸或者压缩。为了让图片显示的自然，我们可以让图片中的一部分去填充整个容器，虽然这样做无法让图片显示完整，但也避免了因图片的拉伸或压缩导致的变形。代码如下：
<style>
div{
width: 200px；
height: 200px;
background: url('xxxx.png') no-repeat;
background-size: cover;
background-position: center center;
}
</style>
<div></div>
图片自适应容器宽高
css实现图片自适应容器宽高的做法一般如下所示
div{width: 200px; height: 200px}
div img{width: 100%; height: 100%}
</style>
<div>
<img src="xxxx.png" />
</div>
