Question

这个按钮的高度理想情况下应该填充类似于蓝色轮廓的白色空间，但由于某种原因不会填满该空间。

代码是：

 <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可能应该在一个单独的文件中，但是现在我只是想让它看起来正确。谢谢！

Answer 1

图片的画布尺寸很大。

使用此图片 - http://i.imgur.com/4sAOhQ4.png

Answer 2

检查这个小提琴 - 你的图像采用完整尺寸的按钮框：

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>

Answer 3

图像是png，这是一种允许透明的图像格式。

查看图片周围的灰色和白色棋盘？这是所有透明空间，创造一个看不见的边界＆＃34;按钮本身。使用图像编辑工具裁剪图像（或使用他的答案中提供的图像afelixj）。

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

3 个答案: