html - 输入类型文件的响应式输入图标

Question

我在我的输入类型文件中添加了 css，其中的眉毛按钮被图像替换了。当我将屏幕调整为高度和宽度为 40px 时，图像没有响应。根据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 (尝试调整结果框的大小)