کارت تصویر نسبت ابعاد

با ویژگی aspect-ratio ، همانطور که اندازه کارت را تغییر می دهید، بلوک بصری سبز این نسبت تصویر 16 x 9 را حفظ می کند. ما نسبت تصویر را با aspect-ratio: 16 / 9 رعایت می کنیم.

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

برای حفظ نسبت تصویر 16 x 9 بدون این ویژگی، باید از یک padding-top hack استفاده کنید و به آن padding 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;
}