30012


畏れ入ります。

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

[code]

    #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;
    
[/code]

並べて３分割横ならべで各々のliで指定している図は並べると縦横比101*210位になってしまい  
[![縦横比101*210位になってしまい](https://i.stack.imgur.com/bNBPt.jpg)](https://i.stack.imgur.com/bNBPt.jpg)  
一般に広く用いられていると思われる黄金比1:1.618位に各々のイメージ  
を直す方法は御座いますでしょうか？

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

* * *

追加 11/4

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

[code]

    <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>
    
[/code]

(m_m)(m_m)。


CC BY-SA 3.0
2016-10-30T10:46:08.687
29996
2016-11-03T00:05:33.660
2016-11-03T00:05:33.660
19182
19182
question
css
Ul, liで3分割された個別のイメージの縦横比率を黄金比にする方法


HTMLがないので詳細が不明ですが、元々の画像ファイルサイズを希望の比率にするのが一番効率的かと思います。

画像サイズを変更できない場合は希望の比率で透過pngなどを作成・表示し、  
背景画像として画像を設定してみるのではいかがでしょうか。  
background-sizeにcoverを指定することで背景領域を覆う最小サイズで表示されます。

[code]

    <li><img src="hoge.png" alt=""></li>
    
    <style>
        #top_btn ul li {
            background-image: url(image.png);
            background-size: cover;
        }
    </style>
    
[/code]

いずれにせよ、もう少し細かく質問を書いていただけるとよりわかりやすく回答できるかもしれません。


CC BY-SA 3.0
2016-10-31T06:22:45.547
30012
2016-10-31T06:22:45.547
17324
29996
answer