4

現在、アイコンを追加しようとしている webapp が動作しており、それらのアイコンを説明するテキストも含まれています。アイコンを div に収まるように縮小しようとしていますが、これはうまく機能しますが、画像を拡大縮小して div 内にテキストを保持することもできます。私が抱えている問題は、画像は div に収まるように拡大縮小されますが、div 内のテキストを許可するのに十分な大きさに拡大されないことです。

私のHTMLコードは

<div class="ui-grid-b" id="dashGrid">
    <div class="ui-block-a changerbutton" style="height:60px;border-bottom: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
        <center>
            <div>
                <img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
            </div>
            <h4 class="gotobutton" goto="#formSelect" data-icon="grid">Forms</h4>
        </center>
    </div>
    <div class="ui-block-b" style="height:22%"></div>
    <div class="ui-block-c changerbutton" style="height:90px;border-bottom: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
        <center>
            <div>
                <img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
            </div>
            <h4 class="gotobutton" goto="#entries" data-icon="info">Entries</h4>
        </center>
    </div>
    <div class="ui-block-a" style="height:22%"></div>
    <div class="ui-block-b" style="height:22%"></div>
    <div class="ui-block-c" style="height:22%"></div>
    <div class="ui-block-a changerbutton" style="height:22%;border-top: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
        <center>
            <h4 class="gotobutton" goto="#mapScreen" data-icon="star">Map</h4>
            <div>
                <img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
            </div>
        </center>
    </div>
    <div class="ui-block-b" style="height:22%"></div>
    <div class="ui-block-c changerbutton" style="height:22%;border-top: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
        <center>
            <h4 class="gotobutton" goto="#locSettings" data-icon="gear">Settings</h4>
            <div>
                <img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
            </div>
        </center>
    </div>
</div>

、および関連する CSS は

.windowscale-height
{
    max-height: 100%;
    max-width: 100%;
    min-height: 1%;
    min-height: 1%;
}

問題を示す JSFiddle がありますhttp://jsfiddle.net/jDDmC/。

理想的には、テキストと画像の両方が、輪郭を描いたボックスに収まるようにします。

どんな助けでも大歓迎です！

4

2 に答える 2

0

Fluid Imagesのようなものを探しているのではないでしょうか?

于 2013-08-08T16:10:54.087 に答える