CSS flexbox 中图像上的响应式文本

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

您可以使用视口单位。这些将随着视口调整大小而缩放。

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

Answer 2

您可以尝试定义与视口宽度相关的字体大小。例如，尝试在 H1.

上设置 font-size: 5vw

CSS flexbox 中图像上的响应式文本

CSS Responsive text over images in flexbox

css

flexbox

zurb-foundation