Javascript 最初将背景大小设置为100%，但忽略div扩展

我的

btn图标
类中的
背景大小：自动100%
有一些问题。下面发生的事情我知道是正确的，没有任何问题。当按钮文本被压扁时，将创建一条新行，这意味着图标应扩展到其新父级高度的100%

我需要尝试更改
背景大小：auto 100%
的行为，以便它最初将其高度设置为父级高度的100%，就像它那样，但是如果它由于换行而扩展，它将保持完全相同的大小，因此不采用新父级高度的100%

整洁、尺寸完美的图标：


丑陋图标：


HTML:

使用jQuery，在upstart中，将图标高度计算为100%，当您将该动态文本添加到search div时，只需将图标置于中心（
margin top:50%，top:-$（“#icon”）。height（）/2+‘px’
@RoryMcCrossan我在问题中添加了JavaScript和jQuery标记，因为我不确定我所问的是否可以用CSS来完成。为什么不将背景大小设置为静态值？@alberto2000问得好，因为这样图标的大小就不会与按钮的大小相关。这个问题的重点是什么是为了帮助保持流体设计，如果我将其设置为静态值，它将不再与按钮相关（因为按钮大小是百分比）
<a href="#search">
    <div class="button">
        <div class="btn-icon"></div>
        <div class="btn-text">
            <div class="title">Search</div>
            <div class="subtitle">Search for some things by typing things bla bla bla happy days :></div>
        </div>
    </div>
</a>

.button {
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0;
    //font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-size: 0.9em;
    background-color: #0099ff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
    table-layout: fixed;
    padding: 2% 0;
    height: 15%;
}

.btn-icon {
    display: table-cell;
    width: 25%;
    background: url("../img/icons/menu/search.png") no-repeat center center;
    background-size: auto 100%;
    box-sizing: border-box;
}

.btn-text {
    display: table-cell;
    width: 75%;
    padding: 5px 0;
    box-sizing: border-box;
}

.btn-text .title {
    font-size: 1.05em;
    font-weight: 400;
}

.btn-text .subtitle {
    font-size: 0.7em;
    font-weight: 300;
}