하고 싶은 일

고정값 사용하지 않음

JavaScript 사용하지 않음

창 크기와 레이아웃이 변경되어도 자동으로 정사각형

유지

돌파하다

padding-bottom는 y 방향에 영향을 주는 속성이며, 여기서 지정하면% x 방향을 기준으로 그리기

Example

이 빨간색 정사각형은 CSS에서만 제작됩니다.

index.jade

doctype html
html
  head
    link(href="styles/main.css" rel="stylesheet")
  body
    .square-wrapper
      .spacer
      .content

main.stylus

.square-wrapper
  position relative
  width 10%

.spacer
  width 100%
  padding-bottom 100%

.content
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  background red

이 경우 .spacer폭.square-wrapper과 같은 높이를 확보한다.
이렇게 되면 .square-wrapper의 높이도 확장되고 결과.content도 정사각형이 된다.

참조 링크

How can I create a perfectly square DIV where height is equal to viewport?