动态 Div 背景图像大小调整（引导）答案

【问题标题】：Dynamic Div background image resizing (bootstrap)动态 Div 背景图像大小调整（引导）
【发布时间】：2015-11-15 23:27:00
【问题描述】：

所以我想要做的是，一个响应式设计，包含多个相互调整大小的图像，总是相同的大小。

在绿色区域，我想要两个跨越窗口宽度的图像，并且具有 auto 的高度，div 1 的最大高度为 300px，其中 div 2 刚刚在 y 中溢出。

我遇到的最大问题是我无法同时使用 div，我必须为第二张图片使用 img 标签，但我想将内容放在第二个 div 标签中。

Div 1 - 重复 x 背景，第 2 部分 - 图像，内部 div 2 - 内容

如果您需要任何进一步的说明，请尽管询问，谢谢。

编辑： headerBackground 没有显示为我需要的 300px 的高度，但是 headerBackground 的高度需要调整为与 headerImage 相同的高度，但它不能通过 300px 放大

.headerBackground{
	background-image: url('image1.png');
	min-width: 100%;
	height: auto;
	max-height: 300px;
	overflow-y: hidden;
}

.headerImage{
	background-image: url('image2.png');
	height: auto;
	display: block;
	min-width: 100%;
}

<div class="headerBackground">
	<div class="headerImage">
		<!-- content in here -->
	</div>
</div>

【问题讨论】：

请添加您的代码。你有没有尝试过自己做点什么？
嘿，我刚刚添加了一些我尝试过使用的代码，但这就是它应该如何工作的基础

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

你可以试试：

background: url('image1.png') no-repeat center center;   
background-size: cover;

它会：

用图片填充整个 div（无空白）；
根据需要缩放图像；
div 中的中心图像。

来源：w3schools

【讨论】：