Question

我正在制作我网站的草稿版本，它使用比原版更响应的设计，并且遇到问题使我的CSS翻转效果导航栏按钮正确调整大小。我可以让div调整大小，但不是.png图像本身。

以下是“主页”按钮的代码。我将div设置为调整大小为11.5％，因为当它显示在其他按钮旁边时，它们都具有唯一的大小并且非常适合父div。

任何帮助非常感谢:)感谢您的期待！

#homebut
{
display:inline-block;
width:158px;
height:40px;
max-width:11.5%;
max-height:100%;
text-align:center;
background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
background-position:center top;
background-size:auto;


}

#homebut:hover
{
background-position:0 -40px;
background-position:center bottom;

}

#homebut: span
{
position:absolute;
top: -999em;

}

Answer 1

评论为background-size:100% auto;

#homebut {
   display:inline-block;
   width:158px;
   height:40px;
   max-width:11.5%;
   max-height:100%;
   text-align:center;
   background:url(images/buttons/wawhomeroll.png) no-repeat 0 0;
   background-position:center top;

   background-size:100% auto;

  }

Answer 2

试试background-size: cover;。

封面此关键字指定应将背景图像缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。

使用CSS调整div背景图像的大小

2 个答案: