html - 为什么标签菜单图像必须大于菜单大小？

Question

请参阅本页中的示例 2

本例中使用的左右圆角图像最高为 83px 高度。我尝试使用高度为 25px 的左右圆角图像（选项卡菜单高度为 25px），但菜单会混乱。

我的问题是

1. 为什么图像必须比实际标签高度大得多？
2. 如何确定图像大小？

Answer 1

如果您使用图像作为该元素的背景，那么您需要这个

.some_class
{
    height:100px; width:100px;
    background: url('close.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%; /*  Safari  */
    -khtml-background-size: 100% 100%; /*  Konqueror  */
    -moz-background-size: 100% 100%; /*  Firefox  */
}

这将使图像保持元素的高度和宽度

如果您在 HTML 代码中使用元素内的图像，例如

<div class="example"><img tag="images/someimage.jpg"></div>

然后在CSS中你需要：

.example
{
   height: 100px
   width:  100px
 }

.example img
{
  width:100%
  height:100%
  here you can set up rounded borders for it too
}