Css 使用flex居中并拉伸背景

我如何水平和垂直地将这个笑脸放在图像顶部的中心，同时将其拉伸到容器大小的50%呢

例如：

.test{
显示器：flex；
}
.测试.微笑{
背景图片：url(https://rawgit.com/anonymous/9f37047667b06af42c3d/raw/65a00b0f38b05bb6c96fa827993dbae31fe391b3/test.svg);
背景重复：无重复；
证明内容：中心；
对齐内容：居中对齐；
弯曲方向：立柱；
身高：50%；
宽度：50%；
}

---

只有当容器设置了高度时，我才能让flexbox工作。由于对齐的图像设置为背景图像，因此无法轻松获得设置的宽度和高度。如果它是一个图像，你很容易就能做一个50%的宽度和高度会照顾自己

.test {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    width: 400px;
    background: url(http://lorempixel.com/400/400) no-repeat;
}
.test .smile {
    background-image: url(https://rawgit.com/anonymous/9f37047667b06af42c3d/raw/65a00b0f38b05bb6c96fa827993dbae31fe391b3/test.svg);
    background-repeat: no-repeat;
    display: block;
    width: 100px;
    height: 100px;
}

如果使用svg，则只需设置.smile类的高度