html - 缩小按钮的尺寸切割图像而不是缩小尺寸

Question

我有一个包含 2 列的表格:右边一列是一些文本，左边一列是一个带有图像的按钮(一些蓝色渐变)和一个文本。图片在 css 文件中(必须是这样)。

当我更改按钮的宽度或高度(百分比)时，它不会减小图像尺寸，而是会剪切它。

如何让它缩小图片的大小？

Html:
<table>
    <tr>
        <td>
            hello hello
        </td>
    </tr>
    <tr>
        <td class="address">
            My name is<br>
            Inigo Montoya
        </td>
        <td style="width: 35%;">
            <button class="button-background" type="button">
                update</button>
        </td>
    </tr>
</table>

css:
    button.button-background
    {
        width: 100%;
        height: 100%;
        background: url('data:image/png;base64,iVBORw0g==');
        background-position: center;
        background-repeat: no-repeat;
        border: transparent;
        color: white;
    }

Answer 1

您需要使图像响应，以便它适合 div/td 宽度。要使图像具有响应性，请向图像添加一个类。

.image-responsive{
    max-width:100%;
    display:block;
}