Flexbox 中图像上的 CSS 响应文本

Question

我有一个 flexbox，里面装满了图片，上面都有文字。我坚持尝试让文本响应。文本需要保留在 div 内并随图像调整大小。任何人对如何最好地完成此任务有任何提示或技巧？我的完整代码示例链接如下。

<div class="container">
<div class="flex-row row">
  <div class="flex-column">
            <div class=" welcome overlay-parent">   
                  <img src="http://placehold.it/548x227">
                    <div class="overlay-text"><h1>Welcome to My Place</h1></div>
                </div>
    <div><img src="http://placehold.it/548x459"></div>
  </div>
  <div class="flex-column">
    <div class="flex-row">
      <div><img src="http://placehold.it/812x459"></div>
    </div>
    <div class="flex-row">
      <div class="feature-about overlay-parent">
        <img src="http://placehold.it/406x227">
                <div class="overlay-text"><h2>About Something</h2>
                    <p>It’s the latest lorem ipsum dolor sit brief intro to the park goes here. ounded in 2016. It’s the latest lorem ipsum dolor sit brief intro to the park goes here. </p> </div>
      </div>
          <div><img src="http://placehold.it/406x227"></div>
    </div>
  </div>
</div>
<div class="flex-row row">
  <div><img src="http://placehold.it/812x459"></div>
  <div><img src="http://placehold.it/548x459"></div>
</div>
</div>

https://codepen.io/enigmas2/pen/ygKmGX

Answer 1

您可以使用视口(viewport)单位。这些将在调整大小时随视口(viewport)一起缩放。

$(document).foundation();

*{box-sizing: border-box;}
:root {font-size: calc(1vw + .1vmin);}
.container{
  max-width: 1360px;
  margin: 0 auto;
}

img{
  border:2px solid white;
}

.flex-row {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.flex-column{
  align-items: flex-start;
  height: 100%;
  max-width: 1360px;
  display: flex;
  flex-direction: column;
}

.overlay-parent {
  position: relative;
}

.overlay-text {
  position: absolute;
  left: 0;
  top:  0;
  width: 100%;
 }

.welcome h1 {
  padding: 20px 0 0 25px;
  line-height: .8em;
  font-size: 5em;

}

.feature-about h2, p {
	padding: 0 5px 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
<div class="container">
<div class="flex-row row">
  <div class="flex-column">
			<div class=" welcome overlay-parent">	
				  <img src="http://placehold.it/548x227">
					<div class="overlay-text"><h1>Welcome to My Place</h1></div>
				</div>
    <div><img src="http://placehold.it/548x459"></div>
  </div>
  <div class="flex-column">
    <div class="flex-row">
      <div><img src="http://placehold.it/812x459"></div>
    </div>
    <div class="flex-row">
      <div class="feature-about overlay-parent">
        <img src="http://placehold.it/406x227">
      			<div class="overlay-text"><h2>About Something</h2>
					<p>It’s the latest lorem ipsum dolor sit brief intro to the park goes here. ounded in 2016. It’s the latest lorem ipsum dolor sit brief intro to the park goes here. </p> </div>
      </div>
		  <div><img src="http://placehold.it/406x227"></div>
    </div>
  </div>
</div>
<div class="flex-row row">
  <div><img src="http://placehold.it/812x459"></div>
  <div><img src="http://placehold.it/548x459"></div>
</div>
</div>