％缩小后将图像移到HTML中吗？

Question

我正在尝试创建一个水平任务栏。我想使用自定义图像，并缩小它们以适合它们。我为此创建了一个类，以缩小图像在无序列表中的位置，但它使图像之间有巨大的差距。如何缩小然后迫使列表图像彼此相邻并在两者之间留有很小的间隙？

示例图片：

列表：

    <ul>
        <li>
            <a href="link1.html">
                <img src="images/homepagebutton.png" class="taskbarimages">
                </a>
            </li>
            <li>
                <a href="link2.html">
                    <img src="images/historybutton.png" class="taskbarimages">
                    </a>
                </li>
            </ul>
        </ul>

CSS：

body {
    background-image: url("repeatbg.gif");
    background-repeat: repeat;
}

.taskbarimages {
    width: 30%;
    height: 30%;
}

#title {
    width: 30%;
    height: 30%;
    margin-left: 10%;
}
.toppage {
    margin-left: 30%;
}
ul {
    list-style-type: none;
}

li {
    float: left;
}

Answer 1

那是因为您还要将其宽度设置为30％（即窗口的30％）。 仅将高度设置为30％，这足以收缩em，并应相应地自动设置其宽度。 （如果不尝试添加宽度：自动；或以像素为单位的高度）。

.taskbarimages {
    height: 30%;
    margin-right: 10px;
}

或者，要缩小范围，您还可以使用缩放比例。

transform: scale(.3);
-webkit-transform: scale(.3);

Answer 2

将每张图片放入div中，并将页边距设置为0，然后将填充量设置为所需的大小即可，或者只需使用CSS转换即可手动移动它们