html - 为什么选项卡菜单图像必须比菜单尺寸大？

Question

参见 this page 中的示例 2

此示例中使用的左右圆 Angular 图像高度为 83px。我尝试使用 25px 高度的左右圆 Angular 图像(选项卡菜单高度为 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
}