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

我必须根据传入站点的变量在站点顶部加载（标题）图像。据我所知，我可以做到这一点，但如果它是背景图片，我只能做到这一点。使用引导程序调整背景图像大小

这是我在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页面，但调整大小，如果在较小的设备上使用。

这可能吗？谢谢！

来源

2017-04-04 ErocM

可以计算图像的长宽比和使用填充顶在纵横比的％。所以这将在所有设备中保持您的背景图像宽高比。 –

以下是参考http://stackoverflow.com/a/32745727/5609596 –

这里是你如何使用响应的背景图像，heightwidth和乘以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>

来源

2017-04-04 18:37:10 hungerstar

谢谢，我会试试看！ – ErocM

完美的作品！ TYVM！ – ErocM

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

回答

相关问题