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

Question

我在background-size: auto 100%课程中遇到btn-icon的问题。我知道下面发生的事情是正确的，没有问题。当按钮文本被压扁时，会创建一个新行，这意味着该图标应扩展到其新父高度的100％。

我需要尝试更改background-size: auto 100%的行为，以便最初将其高度设置为父高度的100％，但是如果它要扩展到期对于换行符，它保持完全相同的大小，因此不会占据新父级高度的100％高度。

整洁，大小合适的图标：

丑陋的图标：

HTML：

<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>

CSS：

.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;
}

Answer 1

在upstart使用jQuery，将图标高度计算为100％，当您将该动态文本添加到搜索div时，只需在中心设置图标（margin-top: 50%, top: -$('#icon').height()/2 + 'px'