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 { 
 
\t 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"> 
 
\t \t \t <div class=" welcome overlay-parent"> \t 
 
\t \t \t \t <img src="http://placehold.it/548x227"> 
 
\t \t \t \t \t <div class="overlay-text"><h1>Welcome to My Place</h1></div> 
 
\t \t \t \t </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"> 
 
     \t \t \t <div class="overlay-text"><h2>About Something</h2> 
 
\t \t \t \t \t <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> 
 
\t \t <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。