Question

我想要一个100％图像宽度和高度的按钮，而不指定按钮的宽度和高度。

例如：如果我更改图像，按钮大小也应根据图像大小动态更改

注意：按钮尺寸应与图像尺寸完全相同，不会拉伸/扭曲/缩小/缩小图像。如果我将图像更改为300px * 200px，则按钮大小也应为300px * 200px。

是否可以单独使用css？

#rock {
  width: 150px;
  height: 150px;
  background-image: url(https://i.imgur.com/CeJU3mO.png);
  background-repeat: no-repeat;
}

<button id="rock"></button>

Answer 1

您可以使用伪元素添加图像，并使其隐藏以保持大小。

#rock {
  background-image: url("https://i.imgur.com/CeJU3mO.png");
  background-repeat: no-repeat;
  padding: 0;
}

#rock:before {
  content: url("https://i.imgur.com/CeJU3mO.png");
  visibility: hidden;
}

<button id="rock"></button>

除背景外，您还可以在按钮内使用内嵌图像。

<button id="rock"><img src="https://i.imgur.com/CeJU3mO.png" alt="Button"></button>

否则请改用<input type="image" src="...">。

input[type="image"] {
  outline: 1px solid; /*demo*/
}

<input type="image" src="https://i.imgur.com/CeJU3mO.png">

注意，默认情况下，该图像有一些空白边。

Answer 2

您无法使元素与background-image的大小匹配，而无需明确设置元素高度以匹配图像。

您可以使用<input type="image">这是一个图形提交按钮，input的大小将与图片的尺寸相匹配。

按钮具有100％的背景图像大小

2 个答案: