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

Answer 2

HTML：

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

CSS：

table {
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid black;
}
.button-background
    {
        width: 100%;
        height: 100%;
        background: url('http://wallpapers.free-   review.net/wallpapers/12/Abstract_Temporary_collapse.jpg');
        background-position: center;
        background-repeat: no-repeat;
        color:white;
    }

缩小按钮的大小会缩小图像而不是缩小尺寸

2 个答案: