代码之家 › 专栏 › 技术社区 › Rahn

按钮的背景图像不会收缩

background-image button css javascript

Rahn · 技术社区 · 7 年前

我试着缩小按钮的背景图像 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 形象。

我不知道出了什么问题。

3 回复 | 直到 7 年前

Eugine Joseph 7 年前

这就是你要找的吗?

试试这些方法

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

-1

F.Igor 7 年前

首先,避免两次声明背景大小:

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');

-1

Ammar A Hasan 7 年前

<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%">