html - 鉴于它是响应式的，我如何才能将我的文本置于图像之上？

Question

文本已经在图像的顶部，但是当您调整页面大小时图像的大小会发生变化。你怎么能让文本调整它的中心到图像的高度？

这是我得到的

HTML

<section id="eyeCatcher">
   <div id="catchContainer" >
       <div id="eyeCatchQuote">
        <h1>text</h1>
       </div>

       <span id="eyeCatchPhoto" role="img" >
           <span class="inner">
           </span>
       </span>
   </div>
</section>

CSS

#eyeCatcher{
   max-width: 1366px; 
   margin: 0 auto; 
}

#catchContainer {
   max-width: 1366px; 
}

#catchContainer #eyeCatchPhoto {
   width: 100%;
   display: inline-block;
   vertical-align: middle;
   font: 0/0 serif;
   text-shadow: none;
   color: transparent;
   background-size: 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

#catchContainer #eyeCatchPhoto .inner{
   padding-top: 60%;
   display: block; 
   height: 0; 
}

#catchContainer #eyeCatchPhoto{
   background-image: url("../img/overview.jpeg");
}

#eyeCatchQuote{
   margin-top: -26px; 
   position: relative; 
   top: 300px; 
}

这就是它的样子

Big

Resize to small

Answer 1

您可以使用实际图像，而不是使用带背景图像的 span。然后可以使用绝对定位使文本居中。

HTML:

<section id="eyeCatcher">
 <div id="catchContainer">
    <div id="eyeCatchQuote">
      <h1>TEXT ELEMENT</h1>
    </div>
    <img src="YOURIMage" id="eyeCatchPhoto" role="img">
  </div>
</section>

CSS:

#eyeCatcher {
  max-width: 1366px;
  margin: 0 auto;
}
#catchContainer {
  max-width: 1366px;
  position: relative;
}
#catchContainer #eyeCatchPhoto {
 width:100%;
}
#eyeCatchQuote {
 position: absolute;
 top: 50%;
 left:50%;
 margin:0;
 transform:translateX(-50%)translateY(-50%);
}

这是一个fiddle