logo标签列表

将一个div中的图片缩放以适应文本

htmlcss
4

现在我有一个正在运作的Web应用程序，我正在尝试添加图标和用于描述这些图标的文本。我试图缩小图标以适应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/。
理想情况下，文本和图片都应该适合于轮廓框内。
需要任何帮助！
2个回答
0
一些事情：
1）删除<center>标签，因为它已经被弃用。改用text-align: center在你的CSS中。
2）你的div有一个特定的height，因此文本超出了框。所以在内联CSS中，删除height属性。
3）最后，考虑只使用外部样式表（而不是内联CSS），因为它更容易维护和重用。
请查看： http://jsfiddle.net/jDDmC/1/
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接