具有可调整大小的图片的CSS文字

问题描述

我如何在图像上固定位置的文字？通过更改浏览器的视图大小来更改图像的大小，我想要的文本和图像的位置是这样的：

我知道使用position：absolute，但也希望该组位于宽度的中心

html：

.figure {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.figure .figcaption {
  width: 100%; 
  height: 0;
  font-size: 25px; 
  line-height: 0;
  color: white;
  position:absolute;
  top: 50%;
  z-index: 1;
}

.figure img {
  display:block;
  max-width: 100%; 
}

#subscribe {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  align-items: center;
}

input {
  -webkit-appearance: none;
  outline: none;
  border: 0;
}


input[type="email"] {
  position: relative;
  width: 50%;
  height: 40px;
  border-radius: 20px;
  padding-left: 20px;
}

<div class="figure">
 <div class="figcaption">
   <div class="slogen">
     <p>SLOGEN1</p>
     <p>SLOGEN2</p>
     <p>SLOGEN3</p>
   </div>
   <div class="content">
     <p>CONTENT1</p>
     <p>CONTENT2</p>  
     <p>CONTENT3</p>
     <p>CONTENT4</p>
   </div>
   <div id="subscribe">
     <input type="email" placeholder="enter your email here">
   </div>
 </div>
 <img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg"/>
</div>

代码在这里：

https://codepen.io/jevonsdone/pen/xxVXzGv

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html position resizable