我有一个包含 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;
}
最佳答案
您需要使图像响应,以便它适合 div/td 宽度。要使图像具有响应性,请向图像添加一个类。
.image-responsive{
max-width:100%;
display:block;
}
关于html - 缩小按钮的尺寸切割图像而不是缩小尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33776949/