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

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>

CSS

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

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

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