ব্যাকগ্রাউন্ড-সাইজ অনুকরণ করুন: <ভিডিও> বা <আইএমজি> এ কভার করুন

154

আমি কীভাবে বা background-size:coverএইচটিএমএল উপাদানের কার্যকারিতা অনুকরণ করতে পারি ?<video><img>

আমি এটি মত কাজ করতে চাই

background-size: cover;
background-position: center center;
javascript  jquery  css 
— seron
সূত্র
1
ঠিক আছে, আমি কখনও ব্যাকগ্রাউন্ড-আকার ব্যবহার করি নি: কভার; তবে আমি এটি অনলাইনে দেখেছি, সুতরাং আপনার উইন্ডোটি পুনরায় আকার দেয় যখন একটি পূর্ণস্ক্রিন চিত্র / ভিডিও রাখার উপায় কী?
— লেনার্ট
হ্যাঁ, তবে এর সাথে সূক্ষ্মতা রয়েছে cover। লিঙ্কে পটভূমি আকার 101 দেখুন ।
— seron
ঠিক আছে তাই কোনও চিত্র / ভিডিওর 100% প্রস্থকে সরল করার জন্য এবং সেখানে যদি কোনও ওভারফ্লো হিসাবে এটি কেটে যায়? আপনি যদি এটি চাইছেন তবে আমি দেখতে পাচ্ছি যে আমি এটি কোড করতে পারি কিনা তবে ভিডিওর জন্য আপনার মনে রাখা উচিত আপনার একটি কাস্টম প্লেয়ার প্রয়োজন কারণ বেশিরভাগ ব্রাউজারগুলিতে নিয়ন্ত্রণগুলি প্লেয়ারের নীচে থাকে এবং সেগুলি যদি সেখানে কাটা যায় তবে ওভারফ্লো ...
— লেনার্ট
হ্যাঁ, বিপরীত দিকগুলিতে সমানভাবে উপচে পড়া। আমি ভিডিও নিয়ন্ত্রণের বিষয়টি সম্পর্কে সচেতন।
— seron
1
উইন্ডোটি যদি চিত্রের চেয়ে বেশি লম্বা হয় তবে এটি উল্লম্ব অক্ষের সাথে খালি স্থান ছেড়ে দেবে I এই ক্ষেত্রে চিত্রটির পরিবর্তে উভয় পক্ষের ওপরে প্রবাহিত হওয়া উচিত এবং এর উচ্চতা উইন্ডোর সমান হওয়া উচিত। উইন্ডোটি চিত্রের চেয়ে প্রশস্ত হলে কনভার্সটি হওয়া উচিত than
— seron

উত্তর:

142

এটি এমন কিছু যা আমি কিছুক্ষণের জন্য আমার চুলগুলি টানিয়ে ফেললাম, তবে আমি একটি দুর্দান্ত সমাধান পেয়েছি যা কোনও স্ক্রিপ্ট ব্যবহার করে না এবং সিএসএসের 5 টি লাইন সহ ভিডিওতে একটি নিখুঁত কভার সিমুলেশন অর্জন করতে পারে (যদি আপনি নির্বাচক এবং বন্ধনী গণনা করেন তবে 9 )। এটিতে 0 প্রান্তের কেস রয়েছে যাতে এটি সিএসএস 3- সামঞ্জস্যের সংক্ষিপ্ততার সাথে পুরোপুরি কার্যকর হয় না ।

আপনি এখানে একটি উদাহরণ দেখতে পারেন

টিমোথির সমাধানের সমস্যাটি হ'ল এটি স্কেলিংটি সঠিকভাবে পরিচালনা করে না। পার্শ্ববর্তী উপাদানটি যদি ভিডিও ফাইলের চেয়ে ছোট হয় তবে এটি ছোট করা যায় না। এমনকি আপনি যদি ভিডিও ট্যাগটিকে একটি ছোট প্রাথমিক আকারও দেন, যেমন 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, এবং transformসিএসএস 3, তাই যদি আপনি প্রয়োজন অনেক পুরোনো ব্রাউজারে সাথে সামঞ্জস্যের , আপনি ব্যবহার স্ক্রিপ্ট করতে হবে।

— এম-পিক্সেল
সূত্র
3
এটি সেরা উত্তর। কোনও জাভাস্ক্রিপ্ট, খাঁটি সিএসএস নয়, সঠিকভাবে স্কেল করে কেন্দ্রিক।
— চিহ্ন.মন্তেরো
6
আহ্ হ্যাঁ মানুষ। এটি এখানে 2016 এর উত্তর all অন্য সকলকে উপেক্ষা করুন।
— জোশ বার্সন
আপনি কেন এই কাজ করে তা ব্যাখ্যা করার যত্ন নেবেন? আমি মাথাটা জড়িয়ে ধরতে পারি না কি vhএবং vwকিছু কি আছে?
— কমনপাইক
1
@ ইনসাইডিন: একটি পোকার পোস্ট?
— এম পিক্সেল
1
2020-এ, সেরা সমাধানটি হ'ল অবজেক্ট-ফিট: কভার, ড্যানিয়েল ডি উইটের উত্তরে বর্ণিত
— ব্রেট ডোনাল্ড
128

jsFiddle

ব্যাকগ্রাউন্ড কভার ব্যবহার করা চিত্রগুলির জন্য সূক্ষ্ম, এবং প্রস্থটি 100%। এগুলি অনুকূল নয় <video>এবং এই উত্তরগুলি অত্যধিক জটিল। পূর্ণ প্রস্থের ভিডিও পটভূমিটি সম্পন্ন করার জন্য আপনার jQuery বা জাভাস্ক্রিপ্টের দরকার নেই।

মনে রাখবেন যে আমার কোডটি কোনও পটভূমি পুরোপুরি কভার উইলের মতো কোনও ভিডিওর সাথে কভার করবে না, তবে এর পরিবর্তে এটি ভিডিওটিকে তত বড় করে তুলবে যেমন অনুপাতের অনুপাত বজায় রাখা এবং এখনও পুরো ব্যাকগ্রাউন্ডটি কভার করতে হবে। যে কোনও অতিরিক্ত ভিডিও পৃষ্ঠার প্রান্ত থেকে রক্তপাত করবে, আপনি যেখানে ভিডিওটি অ্যাঙ্কর করেছেন তার উপর কোন দিকটি নির্ভর করবে।

উত্তরটা বেশ সাধারন.

কেবল এই এইচটিএমএল 5 ভিডিও কোড বা এই লাইন বরাবর কিছু ব্যবহার করুন: (সম্পূর্ণ পৃষ্ঠায় পরীক্ষা)

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>
স্নিপেট প্রসারিত করুন

ন্যূনতম উচ্চতা এবং ন্যূনতম প্রস্থ ভিডিওটিকে ভিডিওর অনুপাত বজায় রাখার অনুমতি দেয় যা সাধারণত কোনও সাধারণ রেজোলিউশনে কোনও সাধারণ ব্রাউজারের অনুপাত অনুপাত হয়। যে কোনও অতিরিক্ত ভিডিওর পৃষ্ঠার পাশ থেকে রক্তপাত ঘটে।

— টিমোথি রায়ান কার্পেন্টার
সূত্র
2
এটি অন্যান্য উত্তরগুলির চেয়ে অনেক সহজ এবং আমার পক্ষে কাজ করে। শুধু কৌশল নির্ধারণ min-widthবা min-heightনা।
— রায়ান বার্নি
31
এই সমাধানটি কভারের মতো ভিডিওকে কেন্দ্র করে না।
— ওয়েট
1
নতুনদের বাচ্চাদের চুল বাইরে বের করা থেকে বিরত রাখার জন্য কেবল একটি মন্তব্য: # ভিডিও_ব্যাকগ্রাউন্ড {হওয়া উচিত # বিডিওব্যাকগ্রাউন্ড {{
— carrabino
21
এটি কোনও ভিডিওকে মোটেও কমিয়ে দেয় না (আমি এটির আকার বাড়ানোর চেষ্টা করিনি), যা ব্রাউজার উইন্ডোটি ছোট হলে এবং ভিডিওটি বড় আকারের হয়ে উঠলে অসংখ্য সমস্যার সৃষ্টি করে। সুতরাং মূলত এটি শুধুমাত্র ব্যাকগ্রাউন্ড-আকারের রক্তাক্ত অংশের যত্ন নেয়: কভার, স্কেলিং অংশটি নয়।
— কেভিন নিউম্যান
4
বর্তমান প্রযুক্তিগুলির সাথে এটি স্বীকৃত উত্তর হওয়া উচিত: একটি জাভাস্ক্রিপ্টের চেয়ে একটি সিএসএস সমাধান পছন্দনীয়। যদিও এটির জন্য আপনার প্যারেন্ট নোডটি সঠিকভাবে সেট করা দরকার। ভিডিও কেঁদ্রীকরণ জন্য, এই ব্যবহার করুন: position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);।
— সিজেটি
100

কিছু ব্রাউজারের জন্য আপনি ব্যবহার করতে পারেন

object-fit: cover;

http://caniuse.com/object-fit

— ড্যানিয়েল ডি উইট
সূত্র
15
এটি একটি খুব শক্তিশালী ঘোষণা যা ব্রাউজারগুলি যদি এটি গ্রহণ করে তবে ওয়েবসাইটগুলিতে স্কেলিং জিনিসগুলি দিয়ে প্রচুর হতাশার অবসান ঘটাবে।
— মাইক Kormentedy
1
আমি ঠিক এটিই খুঁজছিলাম!
— পিটার_ফ্রেটার
3
সেগুলি ব্রাউজারগুলির জন্য একটি পলিফিল রয়েছে যা এটি এখনও সমর্থন করে না (এখনও): github.com/anselmh/object-fit
— ক্রিমাররা
7
পাশাপাশি আবেদন করতে হবে height: 100%; width: 100%;। এই আধুনিক উত্তরের জন্য ধন্যবাদ
— জোসেফ হারুশ
আমি উদাহরণ এবং তথ্য সহ এটির উপর ভিত্তি করে একটি উত্তর দিয়েছি । এই বৈশিষ্ট্যটি নির্দেশ করার জন্য আপনাকে ধন্যবাদ!
— এলোআইএসডিজি
43

আমি এখানে এটি কীভাবে করেছি। একটি কার্যনির্বাহী উদাহরণ এই জেএসফিডেলে ।

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>
স্নিপেট প্রসারিত করুন

— seron
সূত্র
কেন এই সমাধানটি নিম্নচালিত হয়েছিল? সমস্ত উদ্দেশ্য এবং উদ্দেশ্যগুলির জন্য এটি সমস্যার সমাধান বলে মনে হচ্ছে।
— জানুয়ারী
2
এটি এই সমস্যার জন্য আমি খুঁজে পেয়েছি সেরা সমাধান। ধন্যবাদ!
— Chaser324
1
ভিডিওটি বড় এবং উইন্ডো ছোট হলে এটি দুর্দান্ত কাজ করে তবে ভিডিওটির চেয়ে উইন্ডোটি বড় হলে এবং ভিডিওটি আপসালিংয়ের প্রয়োজন হলে আমার পক্ষে কাজ করবে না। আমি ভিডিও টিমে @ টিমোথি-রায়ান-কার্পেন্টার ( এখানে উত্তর দিন ) এর মিনি ট্রিকটি যুক্ত করেছি : video { min-width: 100%; min-height: 100%; }এবং এটি একটি কবজির মতো কাজ করে।
— আলেকজান্দ্রে ডুব্রেইল
আমি এই পদ্ধতিরও
— জিম
@ অ্যালেক্সানড্রেডুব্রেউইল যা বলেছে তা সত্ত্বেও, এই ভিডিওগুলি সঠিকভাবে আঁকতে পারে (নিজের জন্য দেখুন: fiddle.jshell.net/GCtMm/show )। এটি অবশ্যই এখানে সেরা সমাধান। লজ্জাজনক এটি এখানে অন্য উত্তরের তুলনায় জেএস ভারী, কিন্তু আপনি যদি background-size: coverভিডিওর জন্য চান তবে এটি আপনার প্রয়োজন ।
— চক লে বাট
14

অন্যান্য উত্তরগুলি ভাল ছিল তবে সেগুলিতে জাভাস্ক্রিপ্ট জড়িত বা তারা ভিডিওটিকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্র করে না।

আপনি এই পুরো সিএসএস সমাধানটি এমন একটি ভিডিও পেতে পারেন যাতে ব্যাকগ্রাউন্ড-আকার: কভার সম্পত্তি:

  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;
  }
— micred
সূত্র
এটি আমার পক্ষে কাজ করে না। ভিডিওটি পূর্ণ স্ক্রিন পর্যন্ত স্কেল হয়নি। এই উদাহরণের জন্য আমি কি আপনার এইচটিএমএল দেখতে পাচ্ছি? এটি কি কেবল শরীরে কোনও ভিডিও ট্যাগ?
— ম্যাট
সত্যিই দুর্দান্ত সমাধান। এটি প্রথমে আমার পক্ষে কাজ করেনি তবে এটি সম্ভবত আমি মিস করেছি কারণ যখন আমি আপনার সিএসএস অনুলিপি করে পেস্ট করেছি তখন এটি কার্যকর হয়েছিল! ধন্যবাদ;)
— রাফেলব্যাটেন
2
আমার জন্য দুর্দান্ত কাজ আমি স্রেফ অবস্থান পরিবর্তন করেছি: স্থির থেকে স্থির
— Assaf Katz
14

ড্যানিয়েল ডি উইটের উত্তরের ভিত্তিতে এবং মন্তব্যের আমি আরও কিছুটা অনুসন্ধান করেছি। সমাধানের জন্য তাকে ধন্যবাদ।

সমাধানটি হ'ল ব্যবহার করা object-fit: cover;যার একটি দুর্দান্ত সমর্থন (প্রতিটি আধুনিক ব্রাউজার এটি সমর্থন করে)। আপনি যদি সত্যিই আইই সমর্থন করতে চান তবে আপনি পলিফিলের মতো অবজেক্ট-ফিট-ইমেজ বা অবজেক্ট-ফিট ব্যবহার করতে পারেন ।

ডেমোস:

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>
স্নিপেট প্রসারিত করুন

— কোডিড্যাক্ট ডট কম এলোয়েসডজি
সূত্র
1
সেরা আধুনিক উত্তর।
— রুথিনেটর
1
এটি আধুনিক ব্রাউজারগুলিকে লক্ষ্য করে যে কারওর জন্য উত্তর । ব্যবহার object-fit: coverএবং widthএবং height100% সেট, আপনি একটি আনুপাতিক-স্কেল পেতে imgবা videoকোন অতিরিক্ত মনোযোগ ছাড়া কেন্দ্রে জুম।
— ফিলিপ
13

এম-পিক্সেলের সমাধানটি দুর্দান্ত যে এটি টিমোথির উত্তরটির স্কেলিং সমস্যাটি সমাধান করে (ভিডিওটি স্কেল হবে তবে নীচে নেমে আসবে না, সুতরাং যদি আপনার ভিডিওটি সত্যিই বড় হয় তবে এর অংশে আপনি কেবল একটি ছোট জুম দেখতে পাবেন)। তবে, সমাধানটি ভিডিও ধারকের আকার সম্পর্কিত মিথ্যা অনুমানের উপর ভিত্তি করে তৈরি করা হয়েছে, এটি ভিউপোর্টের প্রস্থ এবং উচ্চতার 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 বাদে থাকে তবে আপনি প্যাডিং-বটম% পরিবর্তন করতে চাইবেন। তা ছাড়া, এটি বাক্সের বাইরে কাজ করে। আইই 9 +, সাফারি 9.0.1, ক্রোম 46, এবং ফায়ারফক্স 41 এ পরীক্ষিত।

সম্পাদনা (মার্চ 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... এটি চেষ্টা করে দেখুন, এবং এটিকে উন্নত করতে নির্দ্বিধায় বোধ করবেন!

— benface
সূত্র
এটি 100% প্রস্থ / উচ্চতা যাই হোক না কেন এটি ফিট করার জন্য এটি সাধারণ রেজোলিউশনের উপরে ভিডিওকে স্কেল করে না। সুতরাং এটি 'কভার' কার্যকারিতা প্রতিলিপি করা হয় না।
— জেটলেজ
@ জেটলেজ এটি এখানে করে। আপনি কোন ব্রাউজারটি পরীক্ষা করছেন? আপনি আমার কোডপেন তাকান?
— বেনফেস
1
এটি আমার পক্ষে এজতে ফ্যালব্যাক হিসাবে দুর্দান্তভাবে কাজ করেছে। চিয়ার্স
— মিঃথান্ডার
@ মিঃথৌন্দর আপনি যদি এটিকে ফালব্যাক হিসাবে ব্যবহার করেন তবে আপনার মূল সমাধান হিসাবে আপনি কী ব্যবহার করবেন?
— বেনফেস
1
@ benoitr007 আমি object-fit: coverএফএফ এবং ক্রোমের জন্য এবং
— আইডির
4

সিএসএস এবং লিটল জেএস ভিডিওটিকে পটভূমিতে এবং অনুভূমিকভাবে কেন্দ্রীভূত করতে পারে।

সিএসএস:

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

জেএস: (উইন্ডোর আকারের সাথে এটি আবদ্ধ করুন এবং একবার আলাদাভাবে কল করুন)

$('#bgvid').css({
    marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
})
— সেলিম হারিজ
সূত্র
3

আমাদের দীর্ঘ মন্তব্য বিভাগের ঠিক পরে, আমি মনে করি আপনি এটি যা খুঁজছেন, এটি jQuery ভিত্তিক:

এইচটিএমএল:

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

আমার আরও উল্লেখ করা উচিত যে আমি কেবল এটি গুগল ক্রোমই পরীক্ষা করেছি ... এখানে একটি জেফফিল: http://jsfiddle.net/ADCKk/

— Lennart
সূত্র
রেজাল্ট ফ্রেমের আকার বা ব্রাউজারের আকার পরিবর্তন করলে jsfiddle কিছুই করার মনে হয় না। আমি এটি ক্রোমে চেষ্টা করেছি।
— seron
আমি এটি আপডেট করেছি, তবে আমার এখনও একটি সামান্য সমস্যা আছে যে আপনি প্রস্থটি হ্রাস করে হঠাৎ লাফিয়ে পড়লে
— লেনার্ট
ঠিক আছে, দুঃখিত তবে আমি নির্লিপ্ত, আমি নিজেকে অনেকটা বিভ্রান্ত করেছি বলে মনে করেছি, সম্ভব কিনা তা আমি নিশ্চিত নই ... উপরের স্ক্রিপ্টটি কেবল পৃষ্ঠাটি রিফ্রেশ করার সময় কাজ করবে যাতে এটি কাজ করে আপনি যখন উইন্ডোটির আকার পরিবর্তন করেন তখন আপনার উইন্ডোটি ব্যবহার করতে হবে in জেসে ইভেন্টটি আকার দিন, তবে আমি এটি কাজ করতে পারছি না, সম্ভবত আপনি সেই তথ্যটি দিয়েই পারেন :) শুভ কামনা
— লেনার্ট
3

আপনার ভিডিওর প্রস্থের চেয়ে কম ব্রাউজারের প্রস্থে থাকাকালীন শীর্ষের উত্তরটি ভিডিওটি কমিয়ে দেয় না। এই সিএসএস ব্যবহার করে চেষ্টা করুন (# বিজিভিড আপনার ভিডিওর আইডি হওয়ার সাথে):

#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%);
}
— রমজি ড্রেসেন
সূত্র
নেতিবাচক z-indexপ্রয়োজন কেন ?
— আলেকারসন
এটি নয় - একাধিক স্তরযুক্ত উপাদানগুলির সাথে ডিজাইনের সময় কেবল সহায়ক। আমি এটি সরিয়েছি।
— রমজী ড্রেসেন
1

আমি এই সমাধানটিও পোস্ট করছি, যেহেতু আমার এই সমস্যা ছিল তবে অন্য সমাধানগুলি আমার পরিস্থিতির জন্য কার্যকর হয়নি ...

আমি সঠিকভাবে অনুকরণ মনে করি 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";
}

}

— bawwb
সূত্র
1

এই পদ্ধতির মধ্যে কেবল CSS এবং এইচটিএমএল ব্যবহার করা হয়। আপনি আসলে খুব সহজেই ভিডিওর নীচে একটি ডিভ স্ট্যাক করতে পারেন। এটি কভার করা হয় তবে আপনি আকার পরিবর্তন করার সময় কেন্দ্রিক নয়।

এইচটিএমএল: 

<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*/ 
}
— killsarcasm
সূত্র
1

নিবন্ধন করুন

এই প্রশ্নের লুকানো হবস থেকে 6 দিনের মধ্যে শেষ হওয়া +100 খ্যাতি রয়েছে b কেবলমাত্র নমনীয় সিএসএস সমাধান পেতে ভিউপোর্ট ইউনিটগুলির উদ্ভাবনী ব্যবহার।

আপনি কেবলমাত্র একটি সিএসএস সমাধানের জন্য এই প্রশ্নের উপরে একটি খোলাখুলি খোলেন, তাই আমি এটি দিয়ে চেষ্টা করব। এর মতো সমস্যার আমার সমাধান হ'ল ভিডিওর উচ্চতা এবং প্রস্থ নির্ধারণের জন্য একটি নির্দিষ্ট অনুপাত ব্যবহার করা। আমি সাধারণত বুটস্ট্র্যাপ ব্যবহার করি তবে এটিকে কাজ না করেই আমি সেখান থেকে প্রয়োজনীয় সিএসএস বের করেছি। এটি এমন একটি কোড যা আমি আগে অন্য জিনিসগুলির মধ্যে ব্যবহার করেছি যা সঠিক অনুপাত সহ একটি এম্বেড করা ভিডিওকে কেন্দ্র করে। এটির জন্য <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>
স্নিপেট প্রসারিত করুন

— turbopipp
সূত্র
1
@ টারবুপিপ উত্তরের জন্য ধন্যবাদ যদিও আমি ভয় করি যে আপনি আমার অনুগ্রহের কারণটি ভুল বুঝেছেন। আমি এটি উত্থাপিত করেছি যাতে আমি এটি একটি বিদ্যমান উত্তরে পুরষ্কার দিতে পারি, অনুগ্রহটি 24 ঘন্টা সক্রিয় না হওয়া পর্যন্ত এটি আমাকে তা করতে দেয় না। তবুও, আপনার প্রচেষ্টার জন্য +1 শতাংশের প্যাডিং ট্রিকটি কোনও উপাদানটি সঠিক দিক অনুপাত বজায় রাখার বিষয়টি নিশ্চিত করার একটি কার্যকর উপায়।
— লুকানো হবস
আহা, ভাল এটা আসলে কোন ঝামেলা ছিল না, এবং ইতিমধ্যে বিদ্যমান উত্তরগুলিতে অনুদান দেওয়া আপনার পক্ষে সত্যই চমৎকার। আমি অনুমান করি আমার অনুগ্রহ পদ্ধতিতে পড়া উচিত। :) ধন্যবাদ
— টার্বোপ্পি
0

থেকে মন্তব্য উত্তর দেওয়ার জন্য weotch যে টিমোথি রায়ান ছুতার এর উত্তরের জন্য অ্যাকাউন্ট নেই coverগুলি পটভূমি কেন্দ্র করে ', আমি এই দ্রুত সিএসএস ফিক্স অফার:

সিএসএস:

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

এই দুটি লাইন যুক্ত করা যে কোনও উপাদানকে কেন্দ্র করবে। আরও ভাল, যে সমস্ত ব্রাউজারগুলি এইচটিএমএল 5 ভিডিও পরিচালনা করতে পারে তারা CSS3 রূপান্তরকে সমর্থন করে, তাই এটি সর্বদা কার্যকর হবে।

সম্পূর্ণ সিএসএস এর মতো দেখাচ্ছে।

#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%);
}

আমি টিমোথির উত্তরে সরাসরি মন্তব্য করতাম, তবে তা করার মতো যথেষ্ট খ্যাতি আমার নেই।

— জ্যাক জেড
সূত্র
0

বন্ধুরা আমার আরও ভাল সমাধান এটির সংক্ষিপ্ত এবং আমার সাথে পুরোপুরি কার্যকর। আমি ভিডিওতে এটি ব্যবহার করেছি। এবং এটি পুরোপুরি CSS এর কভার বিকল্পটি অনুকরণ করে।

জাভাস্ক্রিপ্ট

    $(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%;}
— user2925729
সূত্র
0

আমি কেবল এটি সমাধান করেছি এবং ভাগ করে নিতে চাই। এটি বুটস্ট্র্যাপ ৪ এর সাথে কাজ করে It এটির সাথে কাজ করে imgতবে আমি এটি দিয়ে পরীক্ষা করিনি video। এইচএএমএল এবং এসসিএসএস এখানে রয়েছে

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>
স্নিপেট প্রসারিত করুন

— চোলে
সূত্র
0

পুরানো প্রশ্ন, তবে যদি কেউ এটি দেখে তবে আমার মতে সেরা উত্তরটি হ'ল ভিডিওটি একটি অ্যানিমেটেড জিআইএফতে রূপান্তর করা। এটি আপনাকে আরও অনেক নিয়ন্ত্রণ দেয় এবং আপনি কেবল এটি একটি চিত্রের মতো আচরণ করতে পারেন। এটি মোবাইলে কাজ করার একমাত্র উপায়, যেহেতু আপনি ভিডিওগুলি অটোপ্লে করতে পারবেন না। আমি জানি যে প্রশ্নটি এটি একটি <img>ট্যাগে করতে জিজ্ঞাসা করছে , তবে আমি সত্যিই একটি ব্যবহার <div>এবং করার ক্ষয়ক্ষতি দেখতে পাচ্ছি নাbackground-size: cover

— ডি-মার্ক
সূত্র
এটি একটি দুর্দান্ত ধারণা এবং কিছু ক্ষেত্রে চেষ্টা করার মতো। কেবলমাত্র খারাপ দিকটিই হ'ল * .gif ফাইল আকারে (আমার ক্ষেত্রে) বড়। আমি 2.5MB * .mpeg কে 16MB * .gif এ রূপান্তর করেছি।
— হেনিং ফিশার
আমি সম্মত, এবং প্রায়শই .gifবারটি আকারে অনেক বড় হয়, আবার অস্পষ্টও হয়। আমি এই উত্তরটি লেখার পর থেকে আমার দৃষ্টিভঙ্গি পরিবর্তন হয়েছে। আপনি উভয়ের সেরাকে একত্রিত করতে পারবেন না এটি লজ্জাজনক।
— ডি-মার্ক
আমি মোবাইলের জন্য একটি (সংক্ষিপ্ত) * .gif এবং ডেস্কটপের জন্য একটি *। এমপি 4 দিয়ে শেষ করেছি।
— হেনিং ফিশার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.