और तत्वों पर पृष्ठभूमि-आकार:कवर को कैसे दोहराया जाए

जब जैसे HTML तत्वों के साथ काम किया जाए या , पृष्ठभूमि-आकार:कवर की कार्यक्षमता का अनुकरण करने में चुनौतियों का सामना करना आम बात है। यह सीएसएस संपत्ति यह सुनिश्चित करती है कि पृष्ठभूमि छवि पूरे तत्व को कवर करती है और इसके पहलू अनुपात को बनाए रखती है। या के साथ समान व्यवहार प्राप्त करने के लिए, निम्नलिखित अभिनव समाधान पर विचार करें:

सीएसएस दृष्टिकोण

अकेले सीएसएस का उपयोग करके, आप एक आदर्श कवर सिमुलेशन बना सकते हैं स्क्रिप्ट पर निर्भर हुए बिना वीडियो के लिए। तरकीब मूल तत्व के पहलू अनुपात के सापेक्ष वीडियो की चौड़ाई और ऊंचाई की सटीक गणना करने में निहित है। उदाहरण के लिए, यदि आपके वीडियो का पक्षानुपात 16:9 है:

.parent-element-to-video {
  overflow: hidden;
}
video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}

वीडियो को केन्द्रित करना

यदि आपको भी वीडियो को केन्द्रित करने की आवश्यकता है, तो निम्नलिखित सीएसएस एक विश्वसनीय दृष्टिकोण प्रदान करेगा:

/* merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}
video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}

संगतता संबंधी विचार

हालांकि यह समाधान CSS3 अनुरूप ब्राउज़रों में त्रुटिहीन रूप से काम करता है, पुराने ब्राउज़रों को वांछित परिणाम प्राप्त करने के लिए स्क्रिप्ट-आधारित दृष्टिकोण की आवश्यकता हो सकती है।