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的type ='image'。

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"部分是一个更好的解决方案。请参阅其他优秀答案。

CSS按钮图像调整大小

3 个答案: