按钮的背景图像不会缩小

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

首先，避免两次声明背景大小：

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 2

这是您要找的吗？

试试这些方法中的任何一种

<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 3

<button id="inc-fps-btn"
    class="ui button"
    style="height:20px;
           width:20px;
           overflow:hidden">
<img src="http://www.placehold.it/30/000" style="width:100%;height:100%">

按钮的背景图像不会缩小

button's background image doesn't shrink

javascript

css

button

background-image