Question

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

<button class="tiles" style="padding: 0px; background: url(../static/bilder/tür.jpg); background-size: contain; background-repeat: no-repeat" v-if="selectedCategory==''" >

我如何设计它以使其拉伸按钮的整个宽度？如果比例混乱，那也没关系。

Answer 1

你可以使用background-size: 100% 100%;拉伸图像并弄乱比例，或background-size: cover;可以缩放图像，保留比例和裁剪图像

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

在使用后首先删除内联样式的var = "Aples"：

background-size: contain;

＆＃13;

button {
   background-size: cover;
}

＆＃13;

button {
  background-size: cover;
}

＆＃13;

Answer 3

尝试

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

或尝试添加明确的背景大小。

Answer 4

你可以这样，

如果您给出高度和宽度，或者根据父div提供背景大小属性，那么图像看起来会被压扁。

您应该获得更大的图像，并根据您的要求定位。

我建议使用图片标记并使用图像响应类，以便它适用于所有分辨率。

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

4 个答案: