Ad

Button's Background Image Doesn't Shrink

I try shrinking button's background image like How to make background image shrink proportionally to fit button size in javascript?.

But it doesn't work:

enter image description here

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

where inc-btn-30.png is a 30 * 30 image.

I don't see what went wrong.

Ad

Answer

Is this what you looking for?

Try any of these methods

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

Ad
source: stackoverflow.com
Ad