আকৃতির অনুপাত ইমেজ কার্ড

aspect-ratio বৈশিষ্ট্য সহ, আপনি কার্ডের আকার পরিবর্তন করার সাথে সাথে সবুজ ভিজ্যুয়াল ব্লক এই 16 x 9 আকৃতির অনুপাত বজায় রাখে। আমরা aspect-ratio: 16 / 9 ।

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

এই সম্পত্তি ছাড়া একটি 16 x 9 আকৃতির অনুপাত বজায় রাখতে, আপনাকে একটি padding-top হ্যাক ব্যবহার করতে হবে এবং একটি টপ-টু-প্রস্থ অনুপাত সেট করতে এটিকে 56.25% প্যাডিং দিতে হবে। হ্যাক এড়াতে এবং শতাংশ গণনা করার প্রয়োজন এড়াতে আমাদের শীঘ্রই এর জন্য একটি সম্পত্তি থাকবে। আপনি 1 / 1 অনুপাত সহ একটি বর্গক্ষেত্র তৈরি করতে পারেন, 2 2 / 1 এর সাথে একটি 2 থেকে 1 অনুপাত , এবং একটি সেট আকারের অনুপাতের সাথে স্কেল করার জন্য এই চিত্রটির জন্য আপনার যা কিছু প্রয়োজন।

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

এইচটিএমএল

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

সিএসএস

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

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

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