缩小按钮的大小减少了图像的大小，而不是减小大小

问题描述：

我有一个带有2列的表格：在右侧的一个threre的一些文本，左边的一个有一个带有图像的按钮（一些蓝色渐变）和一个文本。该图像是在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; 
    }

使用'背景size'。但你确定数据网址是好的吗？当我把它放在小提琴中时，它不会显示任何东西。 –

“background-size：contains”完成了这项工作。该网址是蓝色图像 – Dror

答

您需要使图像响应，以便它适合在div/td宽度内。为了让图片更具响应性，请将图片添加到图片中。

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

编辑了答案。打字时拼错。 –

答

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

缩小按钮的大小减少了图像的大小，而不是减小大小

相关推荐