允许图像居中并调整大小以适合按钮|| CSS

Question

我正在做一个“待办事项”＆＃39;列表，我试图将按钮的样式设置为X标记以删除项目符号点。图像出现，但它只是它的一小部分。有没有办法让图像居中并调整大小以适应按钮内部？

input[type="button"] {
background: url(xmark.png);
width: 15px;
height: 15px;
border: none;
float: right;
margin: 3px;
cursor: pointer; cursor: hand;
 }

Answer 1

background-size: contain;和background-position: center center;

应该这样做。

---

事实上，background-size: contain可能足够好，具体取决于您的盒子和图像的大小，但位置属性可以确保安全。

background-size: contain;缩放图片以完全贴合在框中（因此您的图片不会被切断），background-position: center center;可以清晰地将图像水平和垂直居中。