H5实现类似Android的点九图

点九图是Android开发中一种可以根据内容动态调整尺寸而不失真的图片资源。在H5开发中，我们可以使用CSS3的background-size: cover;属性来实现类似的效果。

HTML代码：

<div class="nine-patch"></div>

CSS代码：

.nine-patch {
  width: 200px; /* 设置容器的宽度 */
  height: 100px; /* 设置容器的高度 */
  background-image: url('nine-patch-image.png'); /* 设置点九图资源 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中显示 */
  border: 1px solid #000; /* 为了清晰显示边界，可以不需要 */
}

.nine-patch 类定义了一个容器，该容器会根据内容动态调整尺寸。background-size: cover; 确保背景图片会覆盖整个容器，并且不会失真。这样，当你在 .nine-patch 容器内放置内容时，它会根据内容自适应地伸缩，并且保持图片的九宫格效果。