Изменение размера изображения кнопки CSS

Question

У меня есть кнопка с изображением на ней, хотя изображение растягивается, чтобы поместиться внутри кнопки. Я хочу прекратить это делать и центрировать изображение по вертикали и по горизонтали, но не могу найти способ сделать это, так как изображение добавляется к кнопке с помощью атрибута src.

<div id="form"> 
     <input type="text" value="Name"> 
     <input type="text" value="Email"> 
     <textarea rows="7">Message</textarea> 
     <input id="button" type="image" src="Images/send_icon.png">  
    </div> 

Answer 1

Используйте свойство размера фона, оно может решить вашу проблему.

background:url('imagepath') center no-repeat; background-size: 100% 100%; 

Answer 2

Вы должны стилизовать свою кнопку или ввести с помощью CSS:

input#button{ 
    background-image : url(Images/send_icon.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

И удалить тип = 'образ' вашего HTML.

Answer 3

Если вы действительно не можете изменить HTML, вы можете попробовать добавить отступы к <input>:

<style> 
 
    #button { 
 
     /* ugly green background color, but it serves to show the area of 
 
      the button */ 
 
     background-color: green; 
 
     
 
     /* Setting the size of the button. Set only the width or the 
 
      height, to prevent stretching the image */ 
 
     width: 300px; 
 
      
 
     /* By adding padding, we can change the position of the image 
 
      inside the button */ 
 
     padding-top: 70px; 
 
     padding-bottom: 80px; 
 
     padding-left: 50px; 
 
     padding-right: 50px; 
 
    } 
 
</style> 
 
<input id="button" type="image" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png?v=71aa9dd4a5bb" />

Но на самом деле, меняя HTML, чтобы избавиться от type="image" части является лучшее решение в целом. См. Другие отличные ответы.