如何使用CSS使导航栏背景图像按比例缩放到导航栏边框大小

Question

我使用的背景图像的css如下所示。我的问题是当浏览器调整大小时，图片不会重新调整大小以完全填充导航栏。请参见下面的图片。

#navmenu{
  width:auto;
  height:240px !important;

  background-image: url("../Images/IMG-20160222-WA0001.jpg");
  background-repeat:no-repeat !important;
  background-size:cover !important; /*strech to fit navbar border*/
}

我尝试使用宽度属性进行调整，但没有成功。谢谢。

编辑：

使用 [background-size:contain !important;] 选项时，图像不能适应导航栏边框。请参见最后一张图片。

- HappyFeet

---

也许你想使用background-size: contain代替？ - Aides

@助手，使用选项 [background-size:contain !important;] 时，图像无法适应导航栏边框。请看最后一张图片。请查看编辑。 - HappyFeet

问题在于你只能将图像沿着较短的轴或较长的轴适应，或者拉伸它（你还想实现什么其他结果？）。 - Aides

@助手 我希望它始终被拉伸，这样当浏览器调整大小时，完整的图片总是能够完全显示出来。也就是说，对于图片1，“LondolaGlass”应该像图片2中所示一样完全显示出来，无论浏览器窗口的大小如何。 - HappyFeet

如果您有一个固定高度的 div，这（从技术和逻辑上）将不可能实现，因为 div 的纵横比会发生变化（宽度减小，高度不变），但图像的纵横比保持不变。 - Aides

最好的选择是使用媒体查询来创建响应式设计，并在宽度过低时立即更换图像（例如仅使用图标而不带文本）。 - Aides

Answer 1

尝试使用 background-size:contain。

#navmenu {
  width: auto;
  height: 240px !important;
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-repeat: no-repeat !important;
  background-size: contain !important;
  /*strech to fit navbar border*/
}

<div id="navmenu">
</div>

- Pugazh

---

使用选项[background-size:contain !important;]时，图像不适合导航栏边框。 请参见最后一张图片。 请查看编辑。 - HappyFeet