CSS 사용자 정의 속성으로 요소 종횡비를 정의하는 방법

오늘 저는 Proportional Resizing with CSS Variables이 쓴 . 그는 CSS 사용자 지정 속성을 통해 요소 크기와 종횡비를 제어하는 ​​방법을 공유합니다.

게시물에는 다음 스니펫이 포함되어 있습니다.

.rect {
  --size: 10em;
  --aspect-ratio: 0.5625;
  width: var(--size);
  height: calc(var(--size) / var(--aspect-ratio));
}

rect 클래스 규칙은 두 개의 사용자 지정 속성을 사용하여 height 및 calc을 사용하는 --width에 따라 요소--aspect-ratio를 계산합니다.

사용자 지정 속성에 대체 값을 사용하는 방법

이 스니펫은 이미 꽤 똑똑합니다. 두 가지 가능한 개선 사항이 있습니다.

절대 치수에서만 작동합니다

.

CSS 규칙 자체의 값을 하드 코딩합니다

.

필요한 경우 덮어쓰고 조정할 수 있는 기본 사용자 지정 속성 값을 정의하는 컨테이너 클래스를 만들 수 있다면 어떨까요? 바로 사용할 수 있고 구성 가능한 재사용 가능한 CSS 클래스(구성 요소 클래스라고 할 수도 있습니다 🙈)일 수 있습니다.

HTML은 다음과 같을 수 있습니다.

<div class="aspect-ratio-container"></div>
<div class="aspect-ratio-container" style="--width: 10em; --aspect-ratio: 0.5;"></div>
<div class="aspect-ratio-container" style="--width: 5em; --aspect-ratio: 1;"></div>

aspect-ratio-container는 기본값(--width: 100%; --aspect-ratio: 0.5625; – 100% 너비 및 16:9 비율)을 사용하지만 필요한 경우 사용자 정의 속성으로 이러한 값을 구성할 수 있습니다.



대체 논리를 포함하는 CSS 클래스는 다음과 같습니다.

.aspect-ratio-container {
  /* define default values */  
  --w: var(--width, 100%);
  --ar: var(--aspect-ratio, 0.5625);

  width: var(--w);
  /* use padding-top because it is relative 
     to the element width in case percentages are used */
  padding: calc(var(--w) * var(--ar)) 0 0;
  border: 2px dashed #666;

  > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

이 패턴에 대해 많이 생각하고 있습니다. 구성 요소를 구성하기 위해 사전 정의된 사용자 정의 속성을 갖는 것이 제 생각에는 많은 의미가 있습니다. 그래도 머리를 완전히 감싸지는 않았습니다.

앞으로 클래스는 얼마나 구성 가능해야 합니까? 이 패턴에 대한 규칙을 공식화할 수 있습니까? 이 주제에 대한 아이디어나 의견이 있으면 저와 공유해 주십시오. :)


여기 a quick CodePen to see the aspect-ratio-container class in action 이 있고 Ahmad's post 도 볼 수 있습니다. 👋