Как заставить изображение внутри тега кнопки занимать точную ширину и высоту кнопки

Question

У меня есть элемент кнопки, но я хотел бы иметь изображение внутри. Изображение уже разработано в Photoshop. Размер изображения превышает размер кнопки, и я хочу, чтобы он занимал точный размер кнопки, чтобы он поддерживал поведение элементов кнопки, но при этом отображается изображение на кнопке.

Я попытался установить для свойства border-width, padding и overflow элемента button значение 0px и hidden соответственно. Я также установил для свойства max-width изображения значение 100%

.

<button class = "col-sm-5" style= "border-width: 0px; padding: 
 0px; overflow: hidden;">

    <img src= "photos/myImg.png" style= "max-width:100%;">

</button>

Я не ожидаю каких-либо границ, но получаю серую границу между изображением и кнопкой. Скриншот поведения кнопки / изображения

Answer 1

Попробуйте это

BUTTON {
    padding: 8px 8px 8px 32px;
    font-family: Arial, Verdana;   
    background: #f0f0f0 url([url or base 64 data]);
    background-position: 8px 8px;
    background-repeat: no-repeat;
}​