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
}