Html 拉伸按钮内的背景图像以填充按钮

我试图创建一个按钮宽度的大图像作为背景。图像适合，因此它占据了按钮的所有垂直空间，但图像将水平重复，除非我使用“不重复”，在这种情况下，它只是作为空白空间保留（仍然没有水平填充）

---

我怎样才能使它的样式延伸到按钮的整个宽度？如果比例混乱也没关系。

您可以使用

背景大小：100%100%将拉伸图像并弄乱比例或
背景尺寸：封面它将缩放图像、保留比例并裁剪图像

试试看

background-size: cover;
background-position: center center;   

或者尝试添加一个显式大小的背景。
您可以得到如下结果

如果根据父div指定高度和宽度或背景大小属性，则图像看起来会被压扁

你应该得到一个更大的形象，可以根据你的要求定位

我建议使用图像标签和图像响应类，以便它适用于所有分辨率。
首先删除
背景尺寸：包含为内联样式，使用后：

button {
   background-size: cover;
}


按钮{
背景尺寸：封面；
}
这是测试
更改：背景尺寸：封面
button {
   background-size: cover;
}