Fluid Square Divs (상자 크기 문제)

Question

현재 페이지의 크기가 조절되면 유체 사각형을 유지하려고합니다. 이런 식으로하면 분명히 가능합니다.

div{ 
    width:25% 
    padding-bottom:25%; 
} 

그러나 이것은 기본 상자 - 모델 레이아웃에서만 작동합니다. 여기

box-sizing: border-box; 

를 사용하는 동안 이를 달성 할 수있는 방법은 내 현재의 HTML 구조의 코드 펜이 있습니다 : Code Pen

Answer 1

HTML을 편집하는 옵션 인 경우 :

• 링크를 넣어 절대 위치 지정이있는 span의 텍스트
• 세트 left, right, top 및 bottom에서 0으로 설정하십시오.

Updated Demo

HTML이

... 
<a href="#"><span>Sed volutpat</span></a> 
<a href="#"><span>Sed volutpat</span></a> 
... 

그것은 당신이 무엇을 요구하지만 codepen 예를 보면 분명하지 않다

... 
a { 
    position: relative; 
    width: 80%; 
    padding-bottom: 80%; 
    ... 
} 
a span { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    ... 
}