如何使用css

时间:2016-03-30 10:20:18

标签: css

我用于背景图像的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*/
}

我尝试使用width属性,但没有运气。感谢。

Cropped image view screen size decreased Full image view when screen maximised

修改

使用选项[background-size:contain !important;],图像不适合导航栏边框。请看最后一张图片。enter image description here

1 个答案:

答案 0 :(得分: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>