图像响应式和居中水平背景

我在包含以下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

图像响应式和居中水平背景

回答

相关问题