为什么这个<img>的轮廓比实际图片大得多？

问题描述：

这个按钮的高度应该理想地填充像空白蓝色那样的空白空间，但由于某种原因不会填满空间。

的代码是：

<button style="float:right !important; width:30%; background-color: transparent; background-size: 100%; border:0;" onclick="javascript:Store.cart.add(document.getElementById('cart_variation_id').options[document.getElementById('cart_variation_id').selectedIndex].value);return false;"> 
    <img src="http://i.imgur.com/qS50lMq.png" style="width:100%;display: block;"> 
    </button>

我知道CSS大概应该是在一个单独的文件，但现在我只是想获得它看的权利第一。谢谢！

你可以使用'display：'''''css属性。 –

实际图像是在比图像大的画布上制作的，它的背景是透明的png，所以除非您编辑图像并占用所有的画布空间，否则您可能需要更改图像的位置类型CSS，也许'绝对'，然后移动周围的其他DOM元素根据 – *Morse

因为，你的图像包含它周围的填充！编辑图像，可能你会得到预期的结果 –

答

图像的画布大小很大。

这张图片 - http://i.imgur.com/4sAOhQ4.png

谢谢你，我提到这个，但人们一直在谈论填充-_- ... – *Morse

答

入住这小提琴 - 你的形象需要按钮盒的全尺寸：

fiddle

<body> 
    <button style="float:right !important; width:30%; background-color: yellow; background-size: 100%; border:0; padding:0px;"> 
     <img src="http://i.imgur.com/4sAOhQ4.png" style="width:100%;display: block;"> 
    </button> 
</body>

答

的图像是一个PNG，这是一种允许透明度的图像格式。

查看图像周围的灰色和白色棋盘？这是所有透明的空间，在按钮本身周围创建一个不可见的“边框”。使用图像编辑工具裁剪图像（或仅使用他答案中提供的图像afelixj）。

为什么这个的轮廓比实际图片大得多？

相关推荐