simulate background-size: कवर पर <video> या <img>

Question

मैं background-size:coverएक html तत्व पर <video>या जैसी कार्यक्षमता का अनुकरण कैसे कर सकता हूं <img>?

मैं इसे काम करना पसंद करूंगा

background-size: cover;
background-position: center center;

Comments

ठीक है, मैंने कभी भी पृष्ठभूमि-आकार का उपयोग नहीं किया है: कवर; लेकिन मैंने इसे ऑनलाइन देखा, इसलिए आपकी इच्छा पूर्ण स्क्रीन / वीडियो का एक तरीका है जो विंडो के आकार के अनुसार आकार देता है?

— लेनार्ट

हां, लेकिन इसके साथ सूक्ष्मताएं हैं cover। लिंक पर पृष्ठभूमि का आकार 101 देखें ।

— सेरोन

एक छवि / वीडियो की 100% चौड़ाई को सरल बनाने के लिए ठीक है और अगर वहाँ एक अतिप्रवाह के रूप में यह कट जाता है? यदि आप यह चाहते हैं तो मैं देख सकता हूं कि क्या मैं इसे कोड कर सकता हूं, लेकिन वीडियो के लिए आपको ध्यान रखना चाहिए कि आपको एक कस्टम खिलाड़ी की आवश्यकता होगी क्योंकि अधिकांश ब्राउज़रों में खिलाड़ी के नीचे नियंत्रण होता है और वे वहां से कट जाएंगे। एक अतिप्रवाह है ...

— लेननर्ट

हाँ, विपरीत पक्षों पर समान रूप से अतिप्रवाह। मुझे वीडियो नियंत्रण मुद्दे की जानकारी है।

— सीरन

अगर खिड़की छवि से अधिक लंबी है तो यह ऊर्ध्वाधर अक्ष के साथ कहीं खाली जगह छोड़ देगी, मुझे लगता है। ऐसे मामले में छवि को पक्षों पर अतिप्रवाह करना चाहिए और इसकी ऊंचाई खिड़की के समान होनी चाहिए। और कांसेप्ट तब होना चाहिए जब खिड़की छवि से अधिक व्यापक हो।

— सीरन

Answer 1

यह कुछ ऐसा है जिसे मैंने थोड़ी देर के लिए अपने बालों को बाहर खींच लिया, लेकिन मुझे एक शानदार समाधान मिला जो किसी भी स्क्रिप्ट का उपयोग नहीं करता है, और आप सीएसएस (9 यदि आप चयनकर्ताओं और कोष्ठक की गिनती करते हैं तो 5 लाइनों के साथ वीडियो पर एक पूर्ण कवर सिमुलेशन प्राप्त कर सकते हैं) )। इसमें 0 किनारे-मामले हैं जिनमें यह पूरी तरह से काम नहीं करता है, CSS3- संगतता की कमी है ।

आप यहां एक उदाहरण देख सकते हैं

टिमोथी के समाधान के साथ समस्या यह है कि यह स्केलिंग को सही तरीके से नहीं संभालता है। यदि आसपास का तत्व वीडियो फ़ाइल से छोटा है, तो इसे छोटा नहीं किया जाता है। यहां तक ​​कि अगर आप वीडियो टैग को एक प्रारंभिक प्रारंभिक आकार देते हैं, जैसे कि 16px 9px तक, तो autoयह अपनी मूल फ़ाइल-आकार के न्यूनतम करने के लिए मजबूर करता है। इस पृष्ठ पर वर्तमान शीर्ष मतदान समाधान के साथ, मेरे लिए वीडियो फ़ाइल स्केल डाउन होना असंभव था, जिसके परिणामस्वरूप एक कठोर ज़ूम प्रभाव हुआ।

यदि आपके वीडियो का पहलू अनुपात ज्ञात है, जैसे कि 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 */
}

यदि वीडियो का मूल तत्व पूरे पृष्ठ (जैसे position: fixed; width: 100%; height: 100vh;) को कवर करने के लिए सेट है , तो वीडियो भी होगा।

यदि आप चाहते हैं कि वीडियो भी केंद्रित हो, तो आप अचूक सेंटिंग दृष्टिकोण का उपयोग कर सकते हैं:

/* 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 */
}

बेशक, vw, vh, और transformCSS3 के हैं, इसलिए यदि आप की जरूरत है बहुत पुराने ब्राउज़र के साथ संगतता , आप उपयोग स्क्रिप्ट की आवश्यकता होगी।

Comments

यह सबसे अच्छा जवाब है। कोई जावास्क्रिप्ट, शुद्ध सीएसएस, सही ढंग से और केंद्रित नहीं है।

— मार्क

आह हाँ यार। यह यहाँ 2016 के लिए उत्तर है। अन्य सभी को अनदेखा करें।

— जोश बर्सन

क्या आप यह समझाने की परवाह करेंगे कि यह क्यों काम करता है? मैं इसके चारों ओर अपना सिर नहीं लपेट सकता। क्या करना है vhऔर vwकुछ के साथ क्या करना है?

— कॉमनपाइक

@insidesin: एक बेला पोस्ट?

— एम-पिक्सेल

2020 में, सबसे अच्छा समाधान ऑब्जेक्ट-फिट है: कवर, जैसा कि डेनियल डे विट द्वारा जवाब में वर्णित है

— ब्रेट डोनाल्ड

Answer 2

jsFiddle

पृष्ठभूमि कवर का उपयोग करना छवियों के लिए ठीक है, और इसलिए चौड़ाई 100% है। ये इष्टतम नहीं हैं <video>, और ये उत्तर अत्यधिक जटिल हैं। पूरी चौड़ाई की वीडियो पृष्ठभूमि को पूरा करने के लिए आपको jQuery या जावास्क्रिप्ट की आवश्यकता नहीं है।

ध्यान रखें कि मेरा कोड पूरी तरह से कवर विडियो जैसे वीडियो के साथ एक पृष्ठभूमि को कवर नहीं करेगा, लेकिन इसके बजाय यह वीडियो को उतना बड़ा बना देगा जितना कि पहलू अनुपात को बनाए रखने के लिए और अभी भी पूरी पृष्ठभूमि को कवर करने की आवश्यकता है। किसी भी अतिरिक्त वीडियो को पृष्ठ किनारे से हटा दिया जाएगा, जो कि उस पक्ष पर निर्भर करते हैं जहां आप वीडियो को लंगर डालते हैं।

जवाब बहुत सरल है।

बस इस HTML5 वीडियो कोड, या इन पंक्तियों के साथ कुछ का उपयोग करें: (पूर्ण पृष्ठ में परीक्षण)

html, body {
  width: 100%; 
  height:100%; 
  overflow:hidden;
}

#vid{
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<video id="vid" video autobuffer autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

न्यूनतम ऊंचाई और न्यूनतम चौड़ाई वीडियो को वीडियो के पहलू अनुपात को बनाए रखने की अनुमति देगा, जो आमतौर पर सामान्य संकल्प पर किसी भी सामान्य ब्राउज़र का पहलू अनुपात होता है। पृष्ठ के किनारे से कोई भी अतिरिक्त वीडियो बंद हो जाता है।

Comments

यह अन्य उत्तरों की तुलना में कहीं अधिक सरल है, और मेरे लिए ठीक काम करता है। बस सेटिंग min-widthया min-heightट्रिक करता है।

— रयान बर्नी

यह समाधान वीडियो को कवर की तरह केंद्रित नहीं करता है।

— वीट

सिर्फ एक टिप्पणी के लिए newbies को अपने बालों को बाहर निकालने से रोकने के लिए: #video_background {#videobackground {होना चाहिए।

— कैराबिनो

यह बिल्कुल भी वीडियो को मापता नहीं है (मैंने एक को स्केल करने का प्रयास नहीं किया है), जो कई समस्याओं का कारण बनता है यदि ब्राउज़र विंडो छोटा है, और वीडियो बड़ा है। तो मूल रूप से यह केवल पृष्ठभूमि के आकार के ब्लीड भाग का ख्याल रखता है: कवर, स्केलिंग भाग नहीं।

— केविन न्यूमैन

वर्तमान तकनीकों के साथ यह स्वीकृत उत्तर होना चाहिए: एक सीएसएस समाधान एक जावास्क्रिप्ट के लिए बेहतर है। भले ही इसके लिए आपको अपने पैरेंटकोड को सही तरीके से सेट करना पड़े। वीडियो को केंद्रित करने के लिए, इसका उपयोग करें position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);:।

— सिजिटी

Answer 3

कुछ ब्राउज़रों के लिए आप उपयोग कर सकते हैं

object-fit: cover;

http://caniuse.com/object-fit

Comments

यह एक बहुत ही शक्तिशाली घोषणा है कि, यदि ब्राउज़र ने इसे अपनाया है, तो वेबसाइटों पर चीजों को स्केल करने के साथ बहुत सारी परेशानियों का अंत होगा।

— माइक कोरमेन्डी

यही वह है जिसकी तलाश में मैं हूं!

— पीटर_फ्रेटर

उन भौकों के लिए एक पॉलीफ़िल है जो इसका समर्थन नहीं करता है (अभी तक): github.com/anselmh/object-fit

— creimers

साथ ही आवेदन करना था height: 100%; width: 100%;। इस आधुनिक उत्तर के लिए धन्यवाद

— जोसेफ हारुश

मैंने इस पर एक उदाहरण और चेतावनी के आधार पर एक उत्तर दिया । इस सुविधा को इंगित करने के लिए धन्यवाद!

— aloisdg

Answer 4

यहाँ मैंने यह कैसे किया। एक काम करने वाला उदाहरण इस jsFiddle में है ।

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { // runs after DOM has loaded

  vid_w_orig = parseInt(jQuery('video').attr('width'));
  vid_h_orig = parseInt(jQuery('video').attr('height'));
  $('#debug').append("<p>DOM loaded</p>");

  jQuery(window).resize(function () { resizeToCover(); });
  jQuery(window).trigger('resize');
});

function resizeToCover() {
  // set the video viewport to the window size
  jQuery('#video-viewport').width(jQuery(window).width());
  jQuery('#video-viewport').height(jQuery(window).height());

  // use largest scale factor of horizontal/vertical
  var scale_h = jQuery(window).width() / vid_w_orig;
  var scale_v = jQuery(window).height() / vid_h_orig;
  var scale = scale_h > scale_v ? scale_h : scale_v;

  // don't allow scaled width < minimum video width
  if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

  // now scale the video
  jQuery('video').width(scale * vid_w_orig);
  jQuery('video').height(scale * vid_h_orig);
  // and center it by scrolling the video viewport
  jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
  jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);

  // debug output
  jQuery('#debug').html("<p>win_w: " + jQuery(window).width() + "</p>");
  jQuery('#debug').append("<p>win_h: " + jQuery(window).height() + "</p>");
  jQuery('#debug').append("<p>viewport_w: " + jQuery('#video-viewport').width() + "</p>");
  jQuery('#debug').append("<p>viewport_h: " + jQuery('#video-viewport').height() + "</p>");
  jQuery('#debug').append("<p>video_w: " + jQuery('video').width() + "</p>");
  jQuery('#debug').append("<p>video_h: " + jQuery('video').height() + "</p>");
  jQuery('#debug').append("<p>vid_w_orig: " + vid_w_orig + "</p>");
  jQuery('#debug').append("<p>vid_h_orig: " + vid_h_orig + "</p>");
  jQuery('#debug').append("<p>scale: " + scale + "</p>");
};

#video-viewport {
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: -1; /* for accessing the video by click */
}

#debug {
  position: absolute;
  top: 0;
  z-index: 100;
  color: #fff;
  font-size: 12pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-viewport">
  <video autoplay controls preload width="640" height="360">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"type="video/webm" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv"type="video/webm" />
  </video>
</div>

<div id="debug"></div>

Comments

इस समाधान को क्यों नकार दिया गया? सभी इरादों और उद्देश्यों के लिए यह समस्या को हल करने के लिए लगता है।

— जन

यह इस मुद्दे के लिए मुझे मिला सबसे अच्छा समाधान है। धन्यवाद!

— चेज़र 324

यह बहुत अच्छा काम करता है अगर वीडियो बड़ा है और विंडो छोटा है, लेकिन मेरे लिए काम नहीं करेगा अगर विंडो वीडियो से बड़ी है और वीडियो को अपस्कूलिंग की आवश्यकता है। मैंने @ टिमोथी-रयान-कारपेंटर ( यहां नीचे उत्तर दें ) से मिनिट ट्रिक को वीडियो टैग के रूप में जोड़ा : video { min-width: 100%; min-height: 100%; }और यह एक आकर्षण की तरह काम करता है।

— अलेक्जेंड्रे ड्यूब्रिल

मुझे यह दृष्टिकोण उपयोगी लगा, और इसे किसी भी रुचि के लिए एक साधारण jQuery प्लगइन के रूप में पैक किया गया: github.com/aMoniker/jquery.videocover

— जिम ग्रीनलीफ़

@AlexandreDuBreuil के कहने के बावजूद, यह वीडियो ठीक-ठीक दिखाई देता है (स्वयं देखें: fiddle.jshell.net/GCtMm/show )। यह निश्चित रूप से यहां सबसे अच्छा समाधान है। शर्म करो यह यहाँ अन्य जवाब की तुलना में JS भारी है, लेकिन अगर आपको background-size: coverवीडियो चाहिए तो आपको यही चाहिए ।

— चके ले बट

Answer 5

अन्य उत्तर अच्छे थे लेकिन उनमें जावास्क्रिप्ट शामिल है या वे वीडियो को क्षैतिज और लंबवत रूप से केंद्र में नहीं रखते हैं।

आप इस पूर्ण सीएसएस समाधान का उपयोग एक वीडियो के लिए कर सकते हैं जो पृष्ठभूमि के आकार का अनुकरण करता है: संपत्ति कवर करें:

  video {
    position: fixed;           // Make it full screen (fixed)
    right: 0;
    bottom: 0;
    z-index: -1;               // Put on background

    min-width: 100%;           // Expand video
    min-height: 100%;
    width: auto;               // Keep aspect ratio
    height: auto;

    top: 50%;                  // Vertical center offset
    left: 50%;                 // Horizontal center offset

    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);         // Cover effect: compensate the offset

    background: url(bkg.jpg) no-repeat;      // Background placeholder, not always needed
    background-size: cover;
  }

Comments

यह मेरे लिए काम नहीं किया। वीडियो फ़ुलस्क्रीन तक स्केल नहीं किया गया। क्या मैं इस उदाहरण के लिए आपका html देख सकता हूं? क्या यह शरीर में सिर्फ एक वीडियो टैग है?

— मैट

वास्तव में अच्छा समाधान। यह पहली बार में मेरे लिए काम नहीं किया था, लेकिन यह संभवत: कुछ ऐसा था जिसकी वजह से मैं चूक गया जब मैंने आपकी सीएसएस को कॉपी और पेस्ट किया, तो यह काम कर गया! धन्यवाद;)

— राफेलबिटेन

मेरे लिए बहुत अच्छा काम किया। मैंने अभी-अभी स्थिति बदली: निरपेक्ष

— असाफ काटज़

Answer 6

डैनियल डे विट के जवाब और टिप्पणियों के आधार पर , मैंने कुछ और खोज की। समाधान के लिए उसका धन्यवाद।

समाधान का उपयोग करना है object-fit: cover;जिसके पास एक महान समर्थन है (प्रत्येक आधुनिक ब्राउज़र इसका समर्थन करता है)। यदि आप वास्तव में IE का समर्थन करना चाहते हैं, तो आप ऑब्जेक्ट-फिट-इमेज या ऑब्जेक्ट-फिट जैसे पॉलीफ़िल का उपयोग कर सकते हैं ।

प्रदर्शन:

img {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>

और माता-पिता के साथ:

div {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
img {
  width: 100%;
  height: 100%;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<div>
<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div>

Comments

सर्वश्रेष्ठ आधुनिक उत्तर।

— राउटरिनेटर

यह आधुनिक ब्राउज़रों को लक्षित करने वाले किसी भी व्यक्ति के लिए उत्तर है। का उपयोग करते हुए object-fit: coverऔर widthऔर height100% करने के लिए सेट, आप एक अनुपात में बढ़ाया पाने imgया videoकिसी भी उपद्रव के बिना केंद्र पर जूम।

— जिप

Answer 7

एम-पिक्सेल का समाधान इस मायने में बढ़िया है कि यह टिमोथी के जवाब की स्केलिंग समस्या को हल करता है (वीडियो बड़े पैमाने पर होगा, लेकिन नीचे नहीं, इसलिए यदि आपका वीडियो वास्तव में बड़ा है, तो अच्छे मौके हैं कि आप केवल उसके हिस्से में एक छोटा ज़ूम करके देखेंगे)। हालाँकि, यह समाधान वीडियो कंटेनर के आकार से संबंधित गलत धारणाओं पर आधारित है, अर्थात् यह व्यूपोर्ट की चौड़ाई और ऊंचाई का 100% है। मुझे कुछ मामले मिले हैं जहां यह मेरे लिए काम नहीं करता है, इसलिए मैंने खुद समस्या से निपटने का फैसला किया, और मुझे विश्वास है कि मैं अंतिम समाधान के साथ आया हूं ।

एचटीएमएल

<div class="parent-container">
    <div class="video-container">
        <video width="1920" height="1080" preload="auto" autoplay loop>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</div>

सीएसएस

.parent-container {
  /* any width or height */
  position: relative;
  overflow: hidden;
}
.video-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  /* center vertically */
  top: 50%;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.video-container::before {
  content: "";
  display: block;
  height: 0px;
  padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  /* center horizontally */
  left: 50%;
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

यह वीडियो के अनुपात पर भी आधारित है, इसलिए यदि आपके वीडियो में 16/9 के अलावा कोई अनुपात है तो आप पेडिंग-बॉटम% बदलना चाहेंगे। इसके अलावा, यह बॉक्स से बाहर काम करता है। IE9 +, सफारी 9.0.1, क्रोम 46 और फ़ायरफ़ॉक्स 41 में परीक्षण किया गया।

EDIT (17 मार्च, 2016)

जब से मैंने यह उत्तर पोस्ट किया है मैंने तत्वों background-size: coverऔर दोनों background-size: containपर अनुकरण करने के लिए एक छोटा सीएसएस मॉड्यूल लिखा है <video>: http://codepen.io/benface/pen/NNdBMj

यह वीडियो के लिए अलग-अलग संरेखण का समर्थन करता है (समान background-position)। यह भी ध्यान दें कि containकार्यान्वयन सही नहीं है। इसके विपरीत background-size: contain, यदि कंटेनर की चौड़ाई और ऊंचाई बड़ी है, तो यह वीडियो को उसके वास्तविक आकार से अलग नहीं करेगा, लेकिन मुझे लगता है कि यह अभी भी कुछ मामलों में उपयोगी हो सकता है। मैंने विशेष fill-widthऔर fill-heightकक्षाएं भी जोड़ी हैं जिनका उपयोग containआप एक विशेष मिश्रण के साथ कर सकते हैं containऔर cover... इसे आज़माएं, और इसे सुधारने के लिए स्वतंत्र महसूस करें!

Comments

यह सामान्य रिज़ॉल्यूशन से ऊपर वीडियो को स्केल नहीं करता है ताकि यह 100% चौड़ाई / ऊँचाई पर फिट हो सके चाहे कोई भी हो। इस प्रकार यह 'कवर' कार्यक्षमता की प्रतिकृति नहीं है।

— जेटलीज

@ जेटलीज यह यहाँ करता है। आप किस ब्राउज़र पर परीक्षण कर रहे हैं? क्या आपने मेरा कोडपेन देखा?

— १०

इसने मेरे लिए एज पर कमबैक के रूप में अच्छी तरह से काम किया। चीयर्स

— 14

@MrThunder क्या आप अपने मुख्य समाधान के रूप में उपयोग करते हैं अगर आप इसे कमबैक के रूप में उपयोग करते हैं?

— बेन्फेस

@ benoitr007 मैं object-fit: coverएफएफ और क्रोम के लिए इस्तेमाल किया और IE के लिए

— मॉर्डनिज़र के

Answer 8

object-fit: cover इस IE, सफारी पॉलीफ़िल के साथ सबसे अच्छा जवाब है।

https://github.com/constancecchen/object-fit-polyfill

यह समर्थन कर रहा है img, videoऔर pictureतत्व।

Answer 9

CSS और छोटे js वीडियो को पृष्ठभूमि और क्षैतिज रूप से केंद्रित कर सकते हैं।

सीएसएस:

video#bgvid {
    position: absolute;
    bottom: 0px; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
    overflow: hidden;
}

JS: (इसे विंडो आकार बदलें और एक बार अलग से कॉल करें)

$('#bgvid').css({
    marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
})

Answer 10

हमारे लंबे टिप्पणी अनुभाग के ठीक बाद, मुझे लगता है कि यह वही है जो आप खोज रहे हैं, यह jQuery आधारित है:

HTML:

<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">

जे एस:

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$(window).height()){
            img.style.height=$(window).height()+"px";
       }
       if(img.clientWidth<$(window).width()){
            img.style.width=$(window).width()+"px";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

सीएसएस:

body{
    overflow: hidden;
}

उपरोक्त कोड ब्राउज़रों की चौड़ाई और ऊंचाई का उपयोग कर रहा है यदि आप एक div के भीतर ऐसा कर रहे हैं, तो आपको इसे कुछ इस तरह बदलना होगा:

Div के लिए:

HTML:

<div style="width:100px; max-height: 100px;" id="div">
     <img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
</div>

जे एस:

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$('#div').height()){
            img.style.height=$('#div').height()+"px";
       }
       if(img.clientWidth<$('#div').width()){
            img.style.width=$('#div').width()+"px";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

सीएसएस:

div{
   overflow: hidden;
}

मुझे यह भी बताना चाहिए कि मैंने केवल यह Google Chrome का परीक्षण किया है ... यहाँ एक jsfiddle है: http://jsfiddle.net/ADKK/

Comments

जब मैं परिणाम फ़्रेम का आकार, या ब्राउज़र का आकार बदलता हूं, तो jsfiddle कुछ भी नहीं करता है। मैंने क्रोम में यह कोशिश की।

— सीरन

मैंने इसे अपडेट किया है, लेकिन मेरे पास अभी भी एक मामूली मुद्दा है कि यदि आप चौड़ाई को कम करते हैं तो यह अचानक कूद जाता है ... jsfiddle.net/ADCKk/1

— लेनरर्ट

ठीक है, क्षमा करें, लेकिन मैं क्लूलेस हूं, मैंने बहुत सी चीजों की कोशिश की है जो मुझे लगता है कि मैंने खुद को भ्रमित कर लिया है, मुझे यकीन नहीं है कि यह संभव है ... ऊपर स्क्रिप्ट केवल तब काम करती है जब आप पृष्ठ को ताज़ा करते हैं, इसे काम करने के लिए जब आप एक विंडो का आकार बदलते हैं, तो आपको js में window.resize ईवेंट का उपयोग करने की आवश्यकता होगी, लेकिन मैं इसे काम नहीं कर सकता, हो सकता है कि आप इस जानकारी के साथ हो सकते हैं :) वैसे भी शुभकामनाएँ

— Lennart

Answer 11

जब आप अपने वीडियो की चौड़ाई से कम की ब्राउज़र चौड़ाई पर होते हैं, तो शीर्ष उत्तर वीडियो को मापता नहीं है। इस सीएसएस (#bgvid अपने वीडियो आईडी होने के साथ) का उपयोग करने का प्रयास करें:

#bgvid {
     position: fixed;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
}

Comments

नकारात्मक क्यों z-indexआवश्यक है?

— एलेक्लेरसन

यह नहीं है - कई स्तरित तत्वों के साथ डिजाइन करते समय बस सहायक होता है। मैंने इसे हटा दिया है।

— रामजी ड्रेसेन

Answer 12

मैं इस समाधान के रूप में अच्छी तरह से इस पोस्ट के बाद से, मैं इस समस्या थी, लेकिन अन्य समाधान मेरी स्थिति के लिए काम नहीं किया ...

मुझे लगता है कि background-size:cover;तत्व पृष्ठभूमि छवि छवि संपत्ति के बजाय एक तत्व पर सीएसएस संपत्ति को ठीक से अनुकरण करने के लिए , आपको छवियों के पहलू अनुपात की वर्तमान खिड़कियों पहलू अनुपात से तुलना करनी होगी, इसलिए कोई फर्क नहीं पड़ता कि आकार (और छवि के मामले में भी) खिड़की की तुलना में लंबा) तत्व वह तत्व है जो खिड़की को भर रहा है (और इसे केन्द्रित भी कर रहा है, हालांकि मुझे नहीं पता कि क्या यह एक आवश्यकता थी ...)

एक छवि का उपयोग करना, बस सादगी के लिए, मुझे यकीन है कि एक वीडियो तत्व भी ठीक काम करेगा।

पहले तत्वों का पहलू अनुपात प्राप्त करें (एक बार लोड होने के बाद), फिर विंडो को आकार बदलने वाले हैंडलर से जोड़ दें, प्रारंभिक आकार के लिए इसे एक बार ट्रिगर करें:

var img = document.getElementById( "background-picture" ),
    imgAspectRatio;

img.onload = function() {
    // get images aspect ratio
    imgAspectRatio = this.height / this.width;
    // attach resize event and fire it once
    window.onresize = resizeBackground;
    window.onresize();
}

फिर अपने आकार बदलने वाले हैंडलर में आपको पहले यह निर्धारित करना चाहिए कि खिड़की के वर्तमान पहलू अनुपात की छवि के मूल पहलू अनुपात की तुलना करके चौड़ाई भरना या ऊंचाई भरना है या नहीं।

function resizeBackground( evt ) {

// get window size and aspect ratio
var windowWidth = window.innerWidth,
    windowHeight = window.innerHeight;
    windowAspectRatio = windowHeight / windowWidth;

//compare window ratio to image ratio so you know which way the image should fill
if ( windowAspectRatio < imgAspectRatio ) {
    // we are fill width
    img.style.width = windowWidth + "px";
    // and applying the correct aspect to the height now
    img.style.height = (windowWidth * imgAspectRatio) + "px";
    // this can be margin if your element is not positioned relatively, absolutely or fixed
    // make sure image is always centered
    img.style.left = "0px";
    img.style.top = (windowHeight - (windowWidth * imgAspectRatio)) / 2 + "px";
} else { // same thing as above but filling height instead
    img.style.height = windowHeight + "px";
    img.style.width = (windowHeight / imgAspectRatio) + "px";
    img.style.left = (windowWidth - (windowHeight / imgAspectRatio)) / 2 + "px";
    img.style.top = "0px";
}

}

Answer 13

यह दृष्टिकोण सिर्फ css और html का उपयोग करता है। आप वास्तव में वीडियो के नीचे एक div को आसानी से स्टैक कर सकते हैं। जब आप आकार बदलते हैं तो यह कवर होता है लेकिन केंद्रित नहीं होता है।

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</script>
</head>
<body>
<div id = "contain">
<div id="vid">
    <video autoplay>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
    </video>
</div>
</div>
</body>
</html>

सीसीएस:

/*
filename:style.css
*/
body {
    margin:0;
}

#vid video{
position: absolute; 
right: 0; 
top: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto; 
}

#contain {
width:100%;
height:100%;
zoom:1%;/*Without this the video will be stretched and skewed*/ 
}

Answer 14

@ हब्ब्स को रोकना

इस प्रश्न में 6 दिन में छिपे हुए हॉब्स से +100 की प्रतिष्ठा का खुला इनाम है। एक लचीला सीएसएस केवल समाधान प्राप्त करने के लिए व्यूपोर्ट इकाइयों का आविष्कारशील उपयोग।

आपने सीएसएस केवल समाधान के लिए इस प्रश्न पर एक इनाम खोला, इसलिए मैं इसे आजमाऊंगा। इस तरह की समस्या का मेरा समाधान वीडियो की ऊंचाई और चौड़ाई तय करने के लिए एक निश्चित अनुपात का उपयोग करना है। मैं आमतौर पर बूटस्ट्रैप का उपयोग करता हूं, लेकिन मैंने बिना काम करने के लिए वहां से आवश्यक सीएसएस निकाला। यह एक कोड है जिसे मैंने पहले अन्य चीजों के बीच इस्तेमाल किया है जो सही अनुपात के साथ एक एम्बेड किए गए वीडियो को केंद्र में रखता है। इसके लिए काम करना चाहिए <video>और <img>तत्व भी यह सबसे ऊपर है जो यहां प्रासंगिक है, लेकिन मैंने आपको अन्य दो भी दिए हैं क्योंकि मेरे पास पहले से ही उनके आसपास था। शुभकामनाएँ! :)

jsfiddle पूर्णस्क्रीन उदाहरण

.embeddedContent.centeredContent {
    margin: 0px auto;
}
.embeddedContent.rightAlignedContent {
    margin: auto 0px auto auto;
}
.embeddedContent > .embeddedInnerWrapper {
    position:relative;
    display: block;
    padding: 0;
    padding-top: 42.8571%; /* 21:9 ratio */
}
.embeddedContent > .embeddedInnerWrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.embeddedContent {
    max-width: 300px;
}
.box1text {
    background-color: red;
}
/* snippet from Bootstrap */
.container {
    margin-right: auto;
    margin-left: auto;
}
.col-md-12 {
    width: 100%;
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent centeredContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent rightAlignedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Comments

उत्तर के लिए धन्यवाद @turbopipp हालांकि मुझे डर है कि आपने मेरे इनाम का कारण गलत समझा है। मैंने इसे उठाया है इसलिए मैं इसे एक मौजूदा जवाब के लिए पुरस्कार दे सकता हूं, यह सिर्फ मुझे ऐसा करने की अनुमति नहीं देगा जब तक कि बाउंटी 24 घंटे तक सक्रिय न हो। फिर भी, आपके प्रयासों के लिए प्रतिशत पैडिंग ट्रिक यह सुनिश्चित करने का एक उपयोगी तरीका है कि कोई तत्व सही पहलू अनुपात को बनाए रखे।

— हिडन होब्स

अहा, यह वास्तव में कोई परेशानी नहीं थी, और आपको पहले से मौजूद उत्तरों का इनाम देने के लिए वास्तविक अच्छा था। मुझे लगता है कि मुझे इनाम प्रणाली पर पढ़ना चाहिए। :) धन्यवाद

— टर्बोप्रिप

Answer 15

वीटोच की टिप्पणी का जवाब देने के लिए कि टिमोथी रायन कारपेंटर का जवाब coverपृष्ठभूमि के केंद्र के लिए नहीं है, मैं इस त्वरित सीएसएस फिक्स की पेशकश करता हूं:

सीएसएस:

margin-left: 50%;
transform: translateX(-50%);

इन दो पंक्तियों को जोड़ने से कोई भी तत्व केन्द्रित होगा। इससे भी बेहतर, सभी ब्राउज़र जो एचटीएमएल 5 वीडियो को संभाल सकते हैं, वे CSS3 के परिवर्तनों का भी समर्थन करते हैं, इसलिए यह हमेशा काम करेगा।

पूरा CSS ऐसा दिखता है।

#video-background { 
    position: absolute;
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
    margin-left: 50%;
    transform: translateX(-50%);
}

मैंने सीधे टिमोथी के जवाब पर टिप्पणी की होगी, लेकिन मेरे पास ऐसा करने के लिए पर्याप्त प्रतिष्ठा नहीं है।

Answer 16

दोस्तों मेरे पास इसका बेहतर समाधान है और मेरे लिए पूरी तरह से काम करता है। मैंने इसका इस्तेमाल वीडियो के लिए किया है। और इसकी पूरी तरह से सीएसएस में कवर विकल्प का अनुकरण करता है।

जावास्क्रिप्ट

    $(window).resize(function(){
            //use the aspect ration of your video or image instead 16/9
            if($(window).width()/$(window).height()>16/9){
                $("video").css("width","100%");
                $("video").css("height","auto");
            }
            else{
                $("video").css("width","auto");
                $("video").css("height","100%");
            }
    });

यदि आप यदि फ्लिप करते हैं, तो आप को सम्‍मिलित किया जाएगा।

और यहाँ सी.एस.एस. (यदि आप केंद्र की स्थिति नहीं चाहते हैं तो आपको इसका उपयोग करने की आवश्यकता नहीं है, माता-पिता को " स्थिति: रिश्तेदार " होना चाहिए )

सीएसएस

video {
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;}

Answer 17

मैंने इसे हल किया और साझा करना चाहता था। यह बूटस्ट्रैप 4 के साथ काम करता है। यह इसके साथ काम करता है imgलेकिन मैंने इसके साथ परीक्षण नहीं किया video। यहाँ HAML और SCSS है

HAML

.container
  .detail-img.d-flex.align-items-center
    %img{src: 'http://placehold.it/1000x700'}

SCSS

.detail-img { // simulate background: center/cover
  max-height: 400px;
  overflow: hidden;

  img {
    width: 100%;
  }
}

/* simulate background: center/cover */
.center-cover { 
  max-height: 400px;
  overflow: hidden;
  
}

.center-cover img {
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="center-cover d-flex align-items-center">
    <img src="http://placehold.it/1000x700">
  </div>
</div>

Answer 18

पुराना सवाल है, लेकिन अगर कोई इसे देखता है, तो मेरी राय में सबसे अच्छा जवाब वीडियो को एनिमेटेड GIF में बदलना है। यह आपको बहुत अधिक नियंत्रण देता है और आप इसे केवल एक छवि की तरह मान सकते हैं। यह मोबाइल पर काम करने का एकमात्र तरीका है, क्योंकि आप वीडियो को ऑटोप्ले नहीं कर सकते। मुझे पता है कि यह सवाल एक <img>टैग में करने के लिए कह रहा है, लेकिन मैं वास्तव में ए <div>और कर के उपयोग के नकारात्मक पक्ष को नहीं देखता हूंbackground-size: cover

Comments

यह एक अच्छा विचार है और कुछ मामलों में एक कोशिश के लायक है। केवल नकारात्मक पक्ष यह है कि * .gif फ़ाइलों में बड़ा है (मेरे मामले में)। मैंने 2.5MB * .mpeg को 16MB * .gif में बदल दिया।

— हेन्निंग फिशर

मैं सहमत हूं, और अक्सर समय .gifआकार में बहुत बड़ा होता है, जबकि धुंधला भी। जब से मैंने यह उत्तर लिखा है, मेरा विचार बदल गया है। यह शर्म की बात है कि आप दोनों का सर्वश्रेष्ठ संयोजन नहीं कर सकते।

— डी-मार्क

मैंने मोबाइल के लिए एक (छोटा) * .gif और एक * .mp4 डेस्कटॉप के साथ समाप्त किया।

— हेनिंग फिशर