使用h1覆盖在响应式缩略图上打破溢出

Question

我试图让我的缩略图覆盖50％的包含DIV，高度是自动的，顶部是h1标题。现在，h1标题正在确定包含DIV的高度，因此除非向下滚动（不需要滚动条），否则无法查看完整的缩略图图像。任何帮助是极大的赞赏。谢谢！

这是我的HTML：

<div id="content">
  <div class="featured">
    <a href="#"><img src="images/featured1.jpg" /></a>
    <h1><a href="#">Content for  class "featured" Goes Here</a></h1>
  </div>
  <div class="featured">
    <a href="#"><img src="images/featured2.jpg" /></a>
    <h1><a href="#">Content for  class "featured" Goes Here</a></h1>
  </div>
</div>

我的CSS：

#content {
    overflow: auto;
    position: relative;
}
.featured {
    float: left;
    width: 50%;
    height: auto;
    padding: 0;
    text-align: center;
    vertical-align:middle;
    position: relative;
    overflow: auto;
}
.featured img {
    width: 100%;
    height: auto;
}
.featured h1 {
    color: #CCC;
    font-size: 32px;
    letter-spacing: 0.1em;
    display:block;
    position:relative;
    z-index:3;
    text-align: center;
    vertical-align: middle;
}
.featured>a{
    position:absolute; top:0; left:0; z-index:0;
}
#content .featured:not(:hover) img {
    -webkit-filter: brightness(0.2);
    -moz-filter: brightness(0.2);
    -ms-filter: brightness(0.2);
    -o-filter: brightness(0.2);
    filter: brightness(0.2);
}
#content .featured:hover img {
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}

我的缩略图现在看起来如何：

我希望我的缩略图看起来如何：

Answer 1

那样的东西？ http://jsfiddle.net/L8ttn0nb/

＆＃13;

＆＃13;

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.wrapper {
	width: 100%;
	height: 100%;
	background-color: #AB700C;
}

.wrapper > .child {
	width: 50%;
	height: 97%;
	background-size: 100% 100%;
	float: left;
	display: table; 
}

.wrapper > .child > .content {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: table-cell; 
	vertical-align: middle;
	text-align: center;
	color: #fff;
}

.wrapper > .child > .content:hover {
	background-color: rgba(0, 0, 0, 0);
}

.wrapper > .child > .content a {
	color: #fff;
	text-decoration: none;
}

.wrapper > .child.left {
	background-image: url(images/featured1.jpg);
}

.wrapper > .child.right {
	background-image: url(images/featured2.jpg);
	
}

＆＃13;

<div class="wrapper">
	<div class="child left">
		<div class="content">
			<h1>
				<a href="#">
					Content for  class "featured" Goes Here
				</a>
			</h1>
		</div>			
	</div>
	<div class="child right">
		<div class="content">
			<h1>
				<a href="#">
					Content for  class "featured" Goes Here
				</a>
			</h1>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;