All geek questions in one place

Scaling an image in a div to match text

Now I have a webapp running, to which I am trying to add icons, as well as text to describe these icons. I am trying to scale the icons to a place in the div, which works fine, but also scale the image to hold the text in the div. The problem I am facing is that although the image will scale to fit in the div, it will not scale to also allow text in the div.

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

and the corresponding CSS is

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

I have a JSFiddle that shows the problem, http://jsfiddle.net/jDDmC/ .

Ideally, the text as well as the image will fit into the selected fields.

Any help would be appreciated!

+4
source share
2 answers

A few things:

1) Remove the <center> tag as it is deprecated. Instead, use text-align: center in your css.

2) Your divs have a specific height , and because of this, the text crashes. So in the inline css, remove the height property.

3) Finally, consider using only an external stylesheet (instead of the built-in css), as it is easier to maintain and reuse.

Please take a look at: http://jsfiddle.net/jDDmC/1/

0
source

Are you looking for something like Fluid Images ?

0
source

Source: https://habr.com/ru/post/1495987/

More articles:


All Articles