ডিভের দিক অনুপাত বজায় রাখুন তবে সিএসএসে স্ক্রিনের প্রস্থ এবং উচ্চতা পূরণ করুন?

Question

আমার কাছে একসাথে রাখার জন্য একটি সাইট রয়েছে 16:9যা একটি ভিডিওর মতো প্রায় ল্যান্ডস্কেপের একটি নির্দিষ্ট দিক অনুপাত ।

উপলভ্য প্রস্থ এবং উপলব্ধ উচ্চতা পূরণ করার জন্য আমি এটি কেন্দ্রিক এবং প্রসারিত করতে চাই, তবে কখনও কখনও উভয় পক্ষেই বড় হতে চাই না।

উদাহরণ স্বরূপ:

1. একটি লম্বা এবং পাতলা পৃষ্ঠায় আনুপাতিক উচ্চতা বজায় রাখার সময় পুরো প্রস্থকে প্রসারিত সামগ্রী থাকবে।
2. একটি সংক্ষিপ্ত প্রশস্ত পৃষ্ঠায় আনুপাতিক প্রস্থ সহ পূর্ণ উচ্চতা প্রসারিত সামগ্রী থাকবে।

---

দুটি পদ্ধতি যা আমি দেখেছি:

1. একটি ধারক প্রসারিত করতে সঠিক দিক অনুপাত সহ একটি চিত্র ব্যবহার করুন div, তবে আমি বড় ব্রাউজারগুলিতে একইভাবে আচরণ করতে পারি না।
2. আনুপাতিক নীচে প্যাডিং সেট করা, তবে এটি কেবল প্রস্থের তুলনামূলকভাবে কাজ করে এবং উচ্চতা উপেক্ষা করে। এটি প্রস্থের সাথে আরও বড় হতে থাকে এবং উল্লম্ব স্ক্রোল বারগুলি প্রদর্শন করে।

---

আমি জানি আপনি খুব সহজেই জেএসের সাথে এটি করতে পারেন তবে আমি একটি খাঁটি সিএসএস সমাধান চাই।

কোন ধারনা?

Comments

sitepPoint.com/… ধারক ডিভ সেট করুনposition: relative (default) height: 0 padding-<top/bottom>: H/W*100%

— উজ্জ্বল সিং

Answer 1

নতুন সিএসএস ভিউপোর্ট ইউনিট vw এবং vh(ভিউপোর্টের প্রস্থ / ভিউপোর্ট উচ্চতা) ব্যবহার করুন

বেহালা

উল্লম্ব এবং অনুভূমিকভাবে পুনরায় আকার দিন এবং আপনি দেখতে পাবেন যে উপাদানটি সর্বদা অনুপাতটি ভঙ্গ না করে এবং স্ক্রোলবারগুলি ছাড়াই সর্বোচ্চ ভিউপোর্টের আকার পূরণ করবে!

(খাঁটি) সিএসএস

div
{
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  /* vertical center */
  left: 0;
  right: 0;
  /* horizontal center */
}

<div></div>

আপনি সর্বাধিক 90% প্রস্থ এবং ভিউপোর্টের উচ্চতা: FIDDLE বলুন

* {
  margin: 0;
  padding: 0;
}
div {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  background: pink;
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div></div>

এছাড়াও, ব্রাউজার সমর্থনও বেশ ভাল: আই 9 +, এফএফ, ক্রোম, সাফারি- ক্যানিয়াস

Comments

এটি একটি খুব সুন্দর পরিষ্কার সমাধান। আমি যদিও ব্রাউজার সমর্থন দিয়ে আরও কিছুটা পিছনে ফিরে যেতে পারি। আমি পুরানো ব্রাউজারটি নিয়ে অনুমান করি যে আপনি কেবল সর্বনিম্ন প্রস্থ / উচ্চতা এবং এটিকে সেট করতে চান - যদি এটির স্ক্রোল বারগুলি থাকে তবে তা হয়

— হেনরি গিবসন

উহম .. আমাকে 2 দিনের কাজ এবং ব্যবহারকারীদের হতাশার অসীম পরিমাণ সংরক্ষণ করার জন্য ধন্যবাদ thanks আমি যদি পারতাম 1000+

— Schoening

তুমি আমাকে এতটা সময় বাঁচিয়েছ আপনাকে অসংখ্য ধন্যবাদ

— ডিলান গাট্টে

দুর্ভাগ্যবশত, সাম্প্রতিক iOS সংস্করণ সমর্থন করে না , অথবা ভিউপোর্ট ইউনিট একটি ভাঙা বাস্তবায়ন আছে ( vh, vw, vmin, vmax)। যাইহোক, এখানে একটি কার্যনির্বাহী রয়েছে , যা আইওএস ডিভাইসগুলিকে লক্ষ্য করতে মিডিয়া ক্যোয়ারী ব্যবহার করে।

— টিম

আমি তোমায় ভালোবাসি. দুর্দান্ত সমাধান!

— গুটেমবার্গ

Answer 2

Danieldআরও ব্যবহারের জন্য কেবল একটি কম মিশ্রণে উত্তরটির সংস্কার করুন :

// Mixin for ratio dimensions    
.viewportRatio(@x, @y) {
  width: 100vw;
  height: @y * 100vw / @x;
  max-width: @x / @y * 100vh;
  max-height: 100vh;
}

div {

  // Force a ratio of 5:1 for all <div>
  .viewportRatio(5, 1);

  background-color: blue;
  margin: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Answer 3

সিএসএস ভিউপোর্ট ইউনিটগুলির সাথে এবং ভিউপোর্টের দিক অনুপাতের সাথে খাপ খাইয়ে একসাথে একটি মিডিয়া ক্যোয়ারী ব্যবহার করুন। এর মতো অন্যান্য বৈশিষ্ট্যও আপডেট করার সুবিধা রয়েছে ।@media vwvhfont-size

এই ফ্রিডালটি ডিভের জন্য নির্দিষ্ট দিক অনুপাত এবং টেক্সটটির সাথে সঠিকভাবে মেলে।

প্রাথমিক আকার সম্পূর্ণ প্রস্থের উপর ভিত্তি করে:

div {
  width: 100vw; 
  height: calc(100vw * 9 / 16);

  font-size: 10vw;

  /* align center */
  margin: auto;
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;

  /* visual indicators */
  background:
    url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
    url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
    silver;
}

তারপরে, যখন ভিউপোর্টটি পছন্দসই দিক অনুপাতের চেয়ে প্রশস্ত হয়, বেস পরিমাপ হিসাবে উচ্চতায় স্যুইচ করুন:

/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
  div {
    height: 100vh;
    width: calc(100vh * 16 / 9);

    font-size: calc(10vh * 16 / 9);
  }
}

এটি @ ড্যানিয়েলডের কাছেmax-width এবং max-height যোগাযোগের শিরাতে খুব সাদৃশ্যপূর্ণ , আরও নমনীয়।

Answer 4

এর জন্য আমার আসল প্রশ্নটি ছিল উভয়রই কীভাবে একটি নির্দিষ্ট দিকের উপাদান থাকা যায় তবে একটি নির্দিষ্ট ধারকটির মধ্যে ঠিক এটি মাপসই করা হত যা এটিকে কিছুটা খাঁজকাটে করে তোলে। যদি আপনি সহজেই কোনও পৃথক উপাদানটির দিক অনুপাত বজায় রাখতে চান তবে এটি অনেক সহজ।

আমি যে সর্বোত্তম পদ্ধতিটি দেখতে পেয়েছি তা হ'ল একটি উপাদান শূন্য উচ্চতা প্রদান করে এবং তারপরে উচ্চতা দেওয়ার জন্য শতাংশ প্যাডিং-নীচে ব্যবহার করে। শতকরা প্যাডিং সর্বদা কোনও উপাদানের প্রস্থের সাথে সমানুপাতিক এবং এর উচ্চতা নয়, এর শীর্ষ বা নীচের প্যাডিংয়ের পরেও।

ডাব্লু 3 সি প্যাডিং বৈশিষ্ট্য

সুতরাং আপনি কোনও উপাদানটিকে একটি ধারকের মধ্যে বসার জন্য শতাংশের প্রস্থ দিতে পারেন এবং তারপরে অনুপাতটি নির্দিষ্ট করতে প্যাডিং বা অন্য শর্তে, এর প্রস্থ এবং উচ্চতার মধ্যে সম্পর্ককে ব্যবহার করতে পারেন।

.object {
    width: 80%; /* whatever width here, can be fixed no of pixels etc. */
    height: 0px;
    padding-bottom: 56.25%;
}
.object .content {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 40px;
}

সুতরাং উপরের উদাহরণে অবজেক্টটি ধারক প্রস্থের 80% নেয় এবং তার উচ্চতা সেই মানটির 56.25% হয়। এটির প্রস্থ যদি 160px হয় তবে নীচের প্যাডিংটি হবে এবং এভাবে উচ্চতা 90px হবে - একটি 16: 9 দিক।

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

এছাড়াও কিছু পুরানো ব্রাউজারগুলিতে ভিডাব্লু এবং ভিএইচ ইউনিট সমর্থিত নয়, সুতরাং আমার প্রশ্নের গৃহীত উত্তর আপনার পক্ষে সম্ভব নাও হতে পারে এবং আপনাকে আরও কিছু লো-ফাই ব্যবহার করতে হতে পারে।

Comments

এখানে অতিরিক্ত মার্কআপ ব্যবহার এড়াতে আপনি :: এর আগে বা :: পরে ব্যবহার করে একটি উপাদান যুক্ত করতে পারেন এবং সেই উপাদানটিকে 0 এর উচ্চতা এবং বস্তুর প্রস্থের সাথে সামঞ্জস্য করে এবং তার নিজস্ব 0 প্রস্থের সাথে একটি প্যাডিং-নীচে দিতে পারেন। এটি একই প্রভাব ফেলবে তবে কম মার্কআপ সহ এবং সম্পূর্ণ ধারন ক্ষেত্রটি কোনও ধারক প্রয়োজন না রেখে সামগ্রীতে রাখার জন্য ব্যবহারযোগ্য করে তুলবে।

— হেনরি গিবসন

Answer 5

আমি বুঝতে পেরেছি যে আপনি একটি CSSনির্দিষ্ট সমাধান চান তা চেয়েছিলেন । দিক অনুপাত রাখতে, আপনাকে পছন্দসই দিক অনুপাত দ্বারা উচ্চতা ভাগ করতে হবে। 16: 9 = 1.777777777778।

ধারকটির সঠিক উচ্চতা পেতে আপনার বর্তমান প্রস্থকে 1.777777777778 দ্বারা ভাগ করতে হবে। যেহেতু আপনি ধারকটি সঠিকভাবে বা শতাংশের widthসাথে CSSভাগ করে নিতে CSSপারছেন না, এটি JavaScript(আমার জ্ঞানের) ব্যতীত সম্ভব নয় ।

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

এইচটিএমএল

<div id="aspectRatio"></div>

সিএসএস

body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { background: #ff6a00; }

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

window.onload = function () {
    //Let's create a function that will scale an element with the desired ratio
    //Specify the element id, desired width, and height
    function keepAspectRatio(id, width, height) {
        var aspectRatioDiv = document.getElementById(id);
        aspectRatioDiv.style.width = window.innerWidth;
        aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
    }

    //run the function when the window loads
    keepAspectRatio("aspectRatio", 16, 9);

    //run the function every time the window is resized
    window.onresize = function (event) {
        keepAspectRatio("aspectRatio", 16, 9);
    }
}

আপনি functionযদি আবার ব্যবহার করে ভিন্ন অনুপাতের সাথে অন্য কিছু প্রদর্শন করতে চান তবে আপনি আবার ব্যবহার করতে পারেন

keepAspectRatio(id, width, height);

Comments

আপনার উত্তরের জন্য ধন্যবাদ. স্ক্রিপ্টে এটি করা তুলনামূলকভাবে সহজ, তবে আমি সত্যিই একটি সিএসএস ভিত্তিক সমাধান চেয়েছিলাম। আমি সত্যিই চটজলদি নির্ভরযোগ্য প্রতিক্রিয়াশীল সমাধান চাই এবং মাঝে মাঝে বিভিন্ন ব্রাউজারের ইভেন্টগুলি আকার বদলে কিছুটা পিছিয়ে যায়। ব্রাউজারের আকার পরিবর্তন হয়ে যাওয়ার পরে আপনি নিজের রূপান্তরটি শেষ করেন, তাই এটি সেরা ব্যবহারকারীর অভিজ্ঞতা দেয় না। এমন কিছু চান যা ব্রাউজারের আকার পরিবর্তনের মুহুর্তকে দেয়, তাই বিশুদ্ধ সিএসএস re

— হেনরি গিবসন

@ হেনরি গিবসন স্ক্রিপ্টটি ক্রোম, এফএফ, আইই, অপেরা এবং সাফারিতে পরীক্ষা করা হয়েছে। সমস্ত কাজ হাহাকার এবং এমনকি ব্রাউজারগুলির পুরানো সংস্করণেও নির্ভরযোগ্য। প্রতিটি ব্রাউজার তার নিজস্ব ঘটনা গুলি চালায়। window.onresizeব্রাউজারটি আকার পরিবর্তন করার মুহুর্তে বহিষ্কার করা হয়।

— এমসিএসার্প

মনে রাখবেন শেষ ব্যবহারকারীরা ব্রাউজারগুলিকে প্রায় বিকাশকারীদের মতো আকার পরিবর্তন করেন না

— সাইমন_উইভার

Answer 6

এখন একটি নতুন সিএসএস সম্পত্তি এই ঠিকানায় নিদিষ্ট হল: object-fit।

http://docs.webplatform.org/wiki/css/properties/object-fit

ব্রাউজার সমর্থনটিতে এখনও কিছুটা অভাব রয়েছে ( http://caniuse.com/#feat=object-fit ) - বর্তমানে মাইক্রোসফ্ট ব্যতীত বেশিরভাগ ব্রাউজারে কিছুটা কাজ করে - তবে সময় দেওয়া ঠিক এই প্রশ্নটির জন্য প্রয়োজনীয়।

Answer 7

ড্যানিয়েল্ডের উত্তরটি উত্তম, তবে এটি কেবল তখনই ব্যবহার করা যেতে পারে যখন ডিভিটি পুরো ভিউপোর্টটি পূরণ করে বা কিছুটা ব্যবহার করে calcব্যবহার করা যায় যদি ভিউপোর্টের অন্যান্য সামগ্রীর প্রস্থ এবং উচ্চতা জানা থাকে।

তবে, একত্রিত করে margin-bottom উল্লিখিত উত্তরে পদ্ধতির সাথে কৌতুকটি , সমস্যাটি কেবলমাত্র অন্য সামগ্রীর উচ্চতা সম্পর্কে জানলে হ্রাস করা যায়। আপনার যদি একটি নির্দিষ্ট উচ্চতার শিরোলেখ থাকে তবে এটি দরকারী but

body {
  margin: 0;
  margin-top: 100px; /* simulating a header */
}

main {
  margin: 0 auto;
  max-width: calc(200vh - 200px);
}

section {
  padding-bottom: 50%;
  position: relative;
}

div {
  position:absolute;
  background-color: red;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<main>
  <section>
    <div></div>
  </section>
</main>

এখানে এটি স্ক্যাস ব্যবহার করে একটি জিসফিডেলে রয়েছে যা মানগুলি কোথা থেকে আসে তা আরও স্পষ্ট করে তোলে।

Answer 8

ড্যানিয়েলের উত্তরের ভিত্তিতে আমি #{}বুটস্ট্র্যাপ মডেল ডায়ালগের ভিতরে থাকা ইউটিউব ভিডিওর আইফ্রেমের জন্য ইন্টারপোলেশন ( ) দিয়ে এই এসএএসএস মিক্সিন লিখেছি :

@mixin responsive-modal-wiframe($height: 9, $width: 16.5,
                                $max-w-allowed: 90, $max-h-allowed: 60) {
  $sides-adjustment: 1.7;

  iframe {
    width: #{$width / $height * ($max-h-allowed - $sides-adjustment)}vh;
    height: #{$height / $width * $max-w-allowed}vw;
    max-width: #{$max-w-allowed - $sides-adjustment}vw;
    max-height: #{$max-h-allowed}vh;
  }

  @media only screen and (max-height: 480px) {
    margin-top: 5px;
    .modal-header {
      padding: 5px;
      .modal-title {font-size: 16px}
    }
    .modal-footer {display: none}
  }
}

ব্যবহার:

.modal-dialog {
  width: 95vw; // the modal should occupy most of the screen's available space
  text-align: center; // this will center the titles and the iframe

  @include responsive-modal-wiframe();
}

এইচটিএমএল:

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Video</h4>
      </div>
      <div class="modal-body">
        <iframe src="https://www.youtube-nocookie.com/embed/<?= $video_id ?>?rel=0" frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger waves-effect waves-light"
          data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

প্রস্থ বা উচ্চতা যখন ভিডিওর সাথে সমানুপাতিক নয় তখন ইউটিউব যদি সেই কালো অংশগুলি ছাড়াই ভিডিওটি প্রদর্শন করবে । মন্তব্য:

• $sides-adjustment এই কালো অংশগুলির একটি ছোট অংশকে পাশগুলিতে প্রদর্শিত ক্ষতিপূরণ দেওয়ার জন্য সামান্য সমন্বয়;
• খুব কম উচ্চতার ডিভাইসে (<480px) স্ট্যান্ডার্ড মডেলটি অনেক বেশি জায়গা নেয়, তাই আমি সিদ্ধান্ত নিয়েছিলাম:
  1. লুকোও .modal-footer;
  2. এর অবস্থান সামঞ্জস্য করুন .modal-dialog;
  3. এর আকার হ্রাস করুন .modal-header।

অনেক পরীক্ষার পরে, এটি এখন আমার জন্য নির্দোষভাবে কাজ করছে working

Answer 9

এখানে @ ডানিয়েলড সলিউশনের ভিত্তিতে একটি সমাধান রয়েছে, এটি একটি ডিভের মধ্যেও কাজ করে।

এই উদাহরণে, আমি কৌনিক ব্যবহার করছি তবে এটি দ্রুত ভ্যানিলা জেএস বা অন্য কোনও কাঠামোতে চলে যেতে পারে।

মূল ধারণাটি হ'ল @ ড্যানিয়েলড সলিউশনটি খালি ইফ্রেমের মধ্যে সরিয়ে নিয়ে যাওয়া এবং আইফ্রেমে উইন্ডোর আকার পরিবর্তনের পরে মাত্রাগুলি অনুলিপি করা।

এই iframe এর পিতা উপাদান সঙ্গে মাত্রা ফিট করতে হবে।

https://stackblitz.com/edit/angular-aspect-ratio-by-iframe?file=src%2Findex.html

এখানে কয়েকটি স্ক্রিনশট: