आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाली इमेज कार्ड

aspect-ratio प्रॉपर्टी की मदद से, कार्ड का साइज़ बदलने पर, हरे रंग का विज़ुअल ब्लॉक 16 x 9 आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखता है. हम 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;
}

एचटीएमएल

<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;
}