响应输入输入类型文件的图标

Question

我跟随css到我的输入类型文件，其中眉毛按钮被图像替换。当我调整屏幕大小时，由于高度和宽度都是40像素，因此图像无响应。根据reen重新调整图像大小需要做什么

CSS

<style>
/*Css for upload file button*/
label.filebutton {
    width:40px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-image:url(/tukaiexotic/assets/img/ico/upload.png);
    background-repeat: no-repeat;

}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 40px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

</style>

HTML

<label class="filebutton" style="text-align:center;">
  <span title="Upload Actual Image">
    <input type="file"  accept="image/x-png, image/gif, image/jpeg"  id="myfile" name="myfile" >
  </span>
</label>

Answer 1

使用

background-size:contain;
background-position:center;

代表label.filebutton

检查一下：JSFiddle（尝试调整结果框的大小）