带有 h1 覆盖的响应式缩略图上的溢出中断

Question

我试图让我的缩略图跨越其包含 DIV 的 50%，高度是自动的，并且顶部有一个 h1 header。现在 h1 header 正在确定包含 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/

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);
 
}

<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>

带有 h1 覆盖的响应式缩略图上的溢出中断

Overflow broken on responsive thumbnails with h1 overlay

html

css

thumbnails