Ul, liで3分割された個別のイメージの縦横比率を黄金比にする方法

畏れ入ります。

スタイルシートでこのように

#top_btn ul li {
    display: block;
    vertical-align:bottom;
    width:32%;
    height:90px;
    float:left;
    text-align:center;
    margin: 0 2% 2% 0;
    border:3px solid #fff;
    -webkit-box-shadow: 0px 0px 1px #755600;
    box-shadow: 0px 0px 1px #755600;
    line-height:1.1;
    font-weight:bold;
    position:relative;

並べて３分割横ならべで各々のliで指定している図は並べると縦横比101*210位になってしまい

一般に広く用いられていると思われる黄金比1:1.618位に各々のイメージ
を直す方法は御座いますでしょうか？

宜しくお願い致します(m_m)。

---

追加　11/4

下記お答え頂いて下記表示されているアイコン自体をリサイズしましたが上手く行きません
でした・・・。とりあえず別の事をしていたので解答自体は取り消しませんが、その下のアドバイスを試して見ます。とりあえず、htmlは以下です。(m_m)

<div id="wrapper" class="inner clearfix top">
<article class="clearfix">
<div id="content">
<div id="top_btn">
<ul class="clearfix">
<li id="about"><a href="about/index.html"><span class="l1">***</span>ついて
</a></li>
<li id="area"><a href="area/index.html"><span class="l1">****</span>***</a>
</li>
<li id="voice" class="mr0"><a href="voice/index.html"><span class="l1">***
</span>***</a></li>
<li id="try"><a href="try/index.html"><span class="l1">***</span>***</a>
</li>
<li id="price"><a href="price/index.html">料金</a></li>
<li id="faq" class="mr0"><a href="faq/index.html"><span class="l1">***
</span>***</a></li>
</ul>
</div>

(m_m)(m_m)。