Question

我必须在站点顶部加载（标题）图像，具体取决于传入站点的变量。我可以做到这一点，但据我所知，如果它是背景图像我只能这样做。

这就是我在css中为图像加载所做的事情：

#headerimg 
{
  background-image: url('/Content/CompanyFiles/spi/image3.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  width: 600px;
  height: 133px;   
  margin: 0;
  padding: 0px;
}

和我的HTML代码：

@using MvcBootstrap.MiscClasses
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@ViewBag.Title - My ASP.NET Application</title>
  @Styles.Render("~/Content/css")
  <link href="@Url.Content(string.Format("~/Content/CompanyFiles/{0}/{0}.css?t={1}", MySession.CssName, DateTime.Now.Millisecond))" rel="stylesheet" type="text/css" />
  @Scripts.Render("~/bundles/modernizr")

</head>
<body>

  <div class="img-responsive" id="headerimg"></div>

<div class="content">

  <div class="jumbotron">
    <h2>Payment Portal</h2>
  </div>

  <div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
      <p>&copy; @DateTime.Now.Year</p>
    </footer>
  </div>

  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  @RenderSection("scripts", required: false)

</div>

</body>
</html>

如果我将css更改为100％大小，则不显示该div，因为没有内容且图像只是背景图像，因此它会折叠。

如果我将div设置为特定大小，那么它将保持该大小，并且不会在页面调整大小时调整大小。

我需要能够根据加载的css页面动态插入图像，但如果在较小的设备上使用则调整大小。

这可能吗？谢谢！

Answer 1

以下是使用自适应背景图片的方法，将height除以width并乘以100。这将是你的底部填充。然后使用cover作为background-size:，以便它随元素一起延伸。

header {
  height: 80px;
  background-color: gold;
}
.hero {
  padding-bottom: 37.5%; /* = ( 600 / 1600 ) x 100 */
  background-image: url( 'http://placehold.it/1600x600/A00' );
  background-size: cover;
}

<header></header>
<div class="hero"></div>

使用引导程序调整背景图像的大小

1 个答案: