使用 CSS 调整 div 背景图像大小的问题答案

【问题标题】：Issue resizing a div background image with CSS使用 CSS 调整 div 背景图像大小的问题
【发布时间】：2014-03-16 02:46:53
【问题描述】：

我正在制作我的网站的草稿版本，该版本使用比原始版本更具响应性的设计，并且遇到了使我的 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;

}

【问题讨论】：

如果我记得 - background-size:100% 100%; 有效 - auto 是图像的大小 - 和/或说 background-size: 100 % auto 保持纵横比
太棒了！应用背景尺寸：100% 自动；他们现在正在正确缩放！似乎已经做到了！我现在只需要修改悬停属性和图像本身就可以了。谢谢@RobSedgwick
好东西，杰伊。将其作为答案。 @rocknrollcanneverdie 对 background-size:cover 感兴趣

标签： css image html background resize

【解决方案1】：

试试background-size: cover;。

Cover 该关键字指定背景图片在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，应尽可能缩小。

【讨论】：

【解决方案2】：

作为cmetsbackground-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;

  }

【讨论】：