가로세로 비율 이미지 카드

aspect-ratio 속성을 사용하면 카드 크기를 조절할 때 녹색 시각적 블록이 이 16x9 가로세로 비율을 유지합니다. aspect-ratio: 16 / 9를 사용하여 가로세로 비율을 준수합니다.

.video {
  aspect-ratio: 16 / 9;
}

이 속성 없이 16x9 가로세로 비율을 유지하려면 padding-top 해킹을 사용하고 56.25% 패딩을 적용하여 가로세로 비율을 설정해야 합니다. 곧 해킹을 방지하고 비율을 계산할 필요가 없도록 하는 속성이 제공될 예정입니다. 1 / 1 비율로 정사각형을 만들고, 2 / 1로 2 대 1 비율을 만들 수 있으며, 이 이미지를 설정된 크기 비율로 조정하는 데 필요한 모든 작업을 할 수 있습니다.

.square {
  aspect-ratio: 1 / 1;
}

HTML

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

CSS


        .parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}