レスポンシブ・イメージによる応答テキスト

Question

レスポンシブ・イメージを使用して表を作成しましたが、ウィンドウのサイズ変更時にそこに留まるイメージに固定テキストを追加する方法がわかりません。私が来た最も近い<p class="">を使用していたが、その後のテキストが応答しない...ここで

はスクリプトです： https://jsfiddle.net/2vax05et/

基本的なレイアウト：

<div id="p-container"> 

    <a href="#1"> 
    <figure> 
     <img src="" alt=""> 
    </figure> 
    </a> 

[....] 

</div> 

CSS：

body { 
    width: 80%; 
    margin: 30px auto; 
    font-family: sans-serif; 
} 

h3 { 
    text-align: center; 
    font-size: 1.65em; 
    margin: 0 0 30px; 
} 

div { 
    font-size: 0; 
} 

a { 
    font-size: 16px; 
    overflow: hidden; 
    display: inline-block; 
    margin-bottom: 8px; 
    width: calc(50% - 4px); 
    margin-right: 8px; 
} 

a:nth-of-type(2n) { 
    margin-right: 0; 
} 

@media screen and (min-width: 50em) { 
    a { 
    width: calc(25% - 6px); 
    } 

    a:nth-of-type(2n) { 
    margin-right: 8px; 
    } 

    a:nth-of-type(4n) { 
    margin-right: 0; 
    } 
} 

a:hover img { 
    filter:brightness(80%); 
} 

figure { 
    margin: 0; 
} 

img { 
    border: none; 
    max-width: 100%; 
    height: auto; 
    display: block; 
    background: #ccc; 
    transition: .2s ease-in-out; 
} 

.p a { 
    display: inline; 
    font-size: 13px; 
    margin: 0; 
} 

.p { 
    text-align: center; 
    font-size: 13px; 
    padding-top: 100px; 
} 

Answer 1

HTML：

<a href="#1"> 
    <figure> 
     <img src="image.jpg" alt=""> 
    </figure> 
    <p>Text</p> 
    </a> 

CSS：テキストをcontaingin

a{ 
    position: relative; 
} 

a p { 
    position: absolute; 
    top: 1em; 
    left: 1em; 
} 

p elementだけsouronding aの範囲に拡大していきます。 あなたのニーズに応じて、適切なパディングと栄養補給を追加することをお勧めします。

出典：https://css-tricks.com/text-blocks-over-image/

Answer 2

ビューポート単位をfont-sizeとして使用します。画面のサイズに応じて流動的に拡大/縮小されます。

例：

font-size: 2vw