按钮的背景图片不会缩小

Question

我尝试缩小按钮的背景图片，例如How to make background image shrink proportionally to fit button size in javascript?。

但这不起作用：

<button id="inc-fps-btn"
        class="ui button"
        style="height:20px;
               width:20px;
               background-size: 100%;
               background-size: 20px auto;">
    <img src="res/img/inc-btn-30.png">
</button>

其中inc-btn-30.png是30 * 30图片。

我看不到出了什么问题。

Answer 1

这是您要寻找的吗？

尝试任何一种方法

<div>
  <strong>1. Make the image as button background. </strong>
</div>
<div>
  <button id="inc-fps-btn" class="ui button" style="height:40px; width:40px; background: url('https://placeimg.com/131/131/nature');  
        background-size: cover; ">
</button>
</div>

<div>
  <strong>2. Make the image in button with full size. </strong>
</div>
<div>
  <button id="inc-fps-btn" class="ui button" style="height:40px;
               width:40px; padding: 0;
               background-size: 100%;
               background-size: 20px auto;">
    <img src="https://placeimg.com/131/131/nature" style="width: 100%; height: auto">
</button>
</div>

Answer 2

首先，避免两次声明背景尺寸：

background-size: 100%;
background-size: 20px auto;

并使用以下命令自动调整背景图片的大小：

background-size: contain;
background-image: url('res/img/inc-btn-30.png');

或

background-size: cover;
background-image: url('res/img/inc-btn-30.png');

Answer 3

rect