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

有几件事：

1）删除<center>标签，因为它已被弃用。text-align: center改为在您的 CSS 中使用。

2）您的 div 具有特定height的 ，因此，文本开箱即用。因此，在内联 css 中，删除该height属性。

3) 最后，考虑只使用外部样式表（而不是内联 css），因为它更易于维护和重用。

请看一下：http: //jsfiddle.net/jDDmC/1/

于 2013-08-08T16:03:32.077 回答
0

也许您正在寻找类似流体图像的东西？

于 2013-08-08T16:10:54.087 回答