使用引導程序調整背景圖像大小

我必須根據傳入站點的變量在站點頂部加載（標題）圖像。據我所知，我可以做到這一點，但如果它是背景圖片，我只能做到這一點。使用引導程序調整背景圖像大小

這是我在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

使用引導程序調整背景圖像大小

回答

相關問題