반응 형 이미지에 대한 반응 텍스트

Question

반응 형 이미지를 사용하여 테이블을 만들었지 만, 창 크기를 조정할 때 이미지에 고정 텍스트를 추가하는 방법을 모릅니다. https://jsfiddle.net/2vax05et/

기본 레이아웃 :

<div id="p-container"> 

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

[....] 

</div> 

CSS의 :

여기

스크립트입니다 ... 내가 온 가장 가까운 <p class="">를 사용했지만 다음 텍스트가 응답하지

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 :

a{ 
    position: relative; 
} 

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

p element 텍스트 만 souronding a의 경계로 확장됩니다 containgin. 필요에 따라 적절한 채혈 및 인산염 제거를 추가하는 것이 좋습니다.

출처 : https://css-tricks.com/text-blocks-over-image/

Answer 2

뷰포트 단위를 font-size로 사용하십시오. 화면 크기에 따라 유동적으로 확장됩니다.

예 :

font-size: 2vw