圖像響應式和居中水平背景

我在包含以下HeaderTitle圖像的HTML頁面頂部有一個標題。圖像響應式和居中水平背景

我使用的引導，以獲得我的圖片響應（IMG響應），以及具有圖像居中水平（中心塊）。

我需要做的是添加以下背景圖片（HeaderBack.jpg）：

背後的HeaderTitle形象，所以當HeaderTitle得到調整背景都充滿寬這樣的：

我要補充以下HTML /引導代碼：

<div class="container-fluid"> 
    <div class="row"> 
    <a href="/Default.aspx"><img class="img-responsive center-block" src="/imgs/HeaderTitle.jpg" width="460" height="113" alt="" hspace="0" vspace="0" border="0" /> 
    </div> 
</div>

來源

2017-05-03 G305

您可能想要在圖像周圍創建另一個div，並將該背景添加到該div。（或者，如果您希望整個事情都是可點擊的，您可以將鏈接設置爲顯示：阻止並將這些樣式應用於鏈接）

然後，將背景應用於容器div並將img放入其中。這裏有一個例子：

.header-bg { 
 
    background: url('https://i.stack.imgur.com/gYTEF.jpg'); 
 
    background-size: contain; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="header-bg"> 
 

 
    <a href="/Default.aspx"> 
 
    <img class="img-responsive center-block" src="https://i.stack.imgur.com/ACYHO.jpg" /> 
 
    </a> 
 

 
</div>

然後你就可以將它放入任何.container或.row需要。

來源

2017-05-03 21:08:23

工程就像一個魅力！ Thxs！ – G305

圖像響應式和居中水平背景

回答

相關問題