爲什麼這個<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大概應該是在一個單獨的文件，但現在我只是想獲得它看的權利第一。謝謝！

來源

2016-03-03 user1120190

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

實際圖像是在比圖像大的畫布上製作的，它的背景是透明的png，所以除非您編輯圖像並佔用所有的畫布空間，否則您可能需要更改圖像的位置類型CSS，也許'絕對'，然後移動周圍的其他DOM元素根據 – TrojanMorse

因爲，你的圖像包含它周圍的填充！編輯圖像，可能你會得到預期的結果 –

圖像的畫布大小很大。

這張圖片 - http://i.imgur.com/4sAOhQ4.png

來源

2016-03-03 05:45:12

謝謝你，我提到這個，但人們一直在談論填充-_- ... – TrojanMorse

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

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>

來源

2016-03-03 06:14:55 abhi

的圖像是一個PNG，這是一種允許透明度的圖像格式。

查看圖像周圍的灰色和白色棋盤？這是所有透明的空間，在按鈕本身周圍創建一個不可見的「邊框」。使用圖像編輯工具裁剪圖像（或僅使用他答案中提供的圖像afelixj）。

來源

2016-03-03 06:38:40 symlink

爲什麼這個<img>的輪廓比實際圖片大得多？

回答

相關問題