html - Scaling an image in a div to also fit text -

right i've got webapp working, i'm trying add icons to, along text describe icons. i'm trying scale icons down fit in div, works great, scale image hold text within div. issue i'm having although image scale fit in div, won't scale enough allow text in div.

my html code is

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

, , relevant css

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

i've got jsfiddle shows issue, http://jsfiddle.net/jddmc/.

ideally, text, image, both fit outlined boxes.

any appreciated!

a couple of things:

1) remove <center> tag since it's been deprecated. use text-align: center in css, instead.

2) divs have specific height, , because of that, text goes out of box. in inline css, remove height property.

3) finally, consider using external stylesheet (instead of inline css), since it's easier maintain , reuse.

please take at: http://jsfiddle.net/jddmc/1/