动态Div背景图像调整大小（引导程序）

Question

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

在绿色区域，我希望有两个图像跨越窗口的宽度，并且自动和高度的最大高度为div 1的300px，其中div 2在y中溢出。< / p>

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

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

如果您需要进一步澄清，请询问，谢谢。

修改 headerBackground并没有显示为我需要它的300px的高度，但是高度需要为headerBackground调整大小，与headerImage相同，但它不能向上扩展到300px

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试：

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

它会：

• 用图像填充整个div（无空格）;
• 根据需要缩放图像;
• div中的中心影像。

来源：w3schools