I am currently working on a web application where I want to add icons along with text descriptions. The challenge lies in scaling down the icons to fit inside a div while also accommodating text within the same div. Even though the images scale appropriately, they don't adjust enough to make space for the text.
Here is a snippet of my HTML code:
<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>
(additional HTML blocks...)
</div>
And here is the relevant CSS:
.windowscale-height
{
max-height: 100%;
max-width: 100%;
min-height: 1%;
min-height: 1%;
}
You can see the issue demonstrated on this JSFiddle: http://jsfiddle.net/jDDmC/.
My goal is to have both the text and image snugly fit into their respective outlined boxes. Any suggestions or assistance would be greatly appreciated!