aspect-ratio
속성을 사용하면 카드 크기를 조절할 때 녹색 시각적 블록이 16x9의 가로세로 비율을 유지합니다. Google에서는 aspect-ratio: 16 / 9
의 가로세로 비율을 준수합니다.
.video {
aspect-ratio: 16 / 9;
}
이 속성 없이 16 x 9 가로세로 비율을 유지하려면 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;
}