সিএসএসের সাথে একটি ডিভের দিক অনুপাত বজায় রাখুন

Question

আমি এমন একটি তৈরি করতে চাই divযা উইন্ডোর প্রস্থের পরিবর্তনের সাথে সাথে এর প্রস্থ / উচ্চতা পরিবর্তন করতে পারে।

এমন কোনও সিএসএস 3 বিধি রয়েছে যা এর দিক অনুপাত বজায় রেখে প্রস্থ অনুযায়ী উচ্চতা পরিবর্তন করতে দেয় ?

আমি জানি আমি জাভাস্ক্রিপ্টের মাধ্যমে এটি করতে পারি তবে আমি কেবল সিএসএস ব্যবহার করতে পছন্দ করব।

Comments

আমি প্রতিক্রিয়াশীল অ্যানিমেশনগুলিকে স্কেলিং সম্পর্কিত

— জ্যাচ সসিয়ের

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

— থিও ডি'অর

আমি একটি সামান্য সরঞ্জাম লিখেছি যা অনুপাতের অনুপাত, অ্যাসেক্টর্যাট.আইওর পূর্বরূপ এবং গণনা করা সহজ করে । এটি উপযুক্ত সিএসএস / স্যাস / কম কোডও জেনারেট করে যা আপনি আপনার প্রকল্পগুলিতে অনুলিপি করে আটকে দিতে পারবেন। আশা করি লোকেরা এটি কাজে লাগবে।

— রায়ান হেফনার

এই উদাহরণটি দেখুন: w3schools.com/howto/howto_css_aspect_ratio.asp ..... যে আমার কাজ করেছে

— ক্রিশ্চিয়ান আগুডেলো

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

— জন মেলর

Answer 1

এর <div>জন্য শতাংশের মান সহ একটি মোড়ক তৈরি করুন padding-bottom:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

/* demonstration purposed only : non-essential */
.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

<div class="demoWrapper">
  <div></div>
</div>

এটি <div>এর ধারকটির প্রস্থের 75% এর সমান উচ্চতা সহকারে পরিণত হবে (একটি 4: 3 দিক অনুপাত)।

প্যাডিংয়ের জন্য এটি নির্ভর করে:

শতাংশটি উত্পন্ন বাক্সযুক্ত ব্লক [...] (উত্স: w3.org , জোর খনি) এর প্রস্থের সাথে সম্মান করে গণনা করা হয়

অন্যান্য দিক অনুপাত এবং 100% প্রস্থের জন্য প্যাডিং-নীচের মান:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

---

ডিভ এ কন্টেন্ট স্থাপন:

ডিভের দিক অনুপাত রাখতে এবং এর সামগ্রীটিকে প্রসারিত হওয়া থেকে রক্ষা করতে আপনাকে একেবারে অবস্থানযুক্ত শিশু যুক্ত করতে হবে এবং এটিকে মোড়কের প্রান্তে প্রসারিত করতে হবে:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

এখানে একটি ডেমো এবং আরও একটি গভীরতার ডেমো রয়েছে

Comments

@ শেলম্যাক্স, এটি কারণ প্যাডিং% বর্তমান উপাদানের প্রস্থের সাথে তুলনামূলকভাবে গণনা করা হয়, যেখানে উচ্চতা% হিসাবে প্যারেন্ট উপাদানগুলির উচ্চতার তুলনায় গণনা করা হয়। তদুপরি, নিখুঁত অবস্থানগুলি মৌলটির বাইরের ধারকটির সাথে তুলনামূলকভাবে গণনা করা হয়, যার মধ্যে প্যাডিং অঞ্চল অন্তর্ভুক্ত রয়েছে। আরও তথ্যের জন্য গুগল "সিএসএস বক্স মডেল"

— আনসন কাও

এটি নেস্টেড ফ্যাশনে কাজ করবে বলে মনে হয় না। এটি প্রথম স্তরে কাজ করে, তবে ডিভের বজায় রাখার দিকের অনুপাতের ভিতরে একই জিনিস করার চেষ্টা করার সময় প্যাডিং-নীচের শতাংশটি পিতামাতার প্রস্থের সাথে প্রযোজ্য বলে মনে হয়। এখানে একটি উদাহরণ যেখানে 25% এর .stretchy-wrap.onethird প্যাডিং-নীচে আসলে পিতামাতার প্রস্থের 25% is কেউ এই ব্যাখ্যা করতে পারেন?

— মিস্টারপার্কার

সম্পূর্ণভাবে সন্ত্রস্ত. এটি আমাকে হত্যা করছে যে আপনি যখন উচ্চতাটি 100% ঠিক করতে চান তখন এই কৌশলটি কার্যকর হবে না। @ মিস্টারপার্কার, কৌশলটি একই রেফারেন্সের বিপরীতে সঞ্চালিত প্রস্থ এবং প্যাডিং গণনার উপর নির্ভর করে; উদাহরণস্বরূপ আপনি 100% এর চেয়ে কম প্রস্থ ব্যবহার করতে পারবেন না।

— স্টিভ্যালসারটি

@ মিস্টারপার্কার হ্যাঁ, শতাংশের প্যাডিং মৌলিক উপাদানগুলির প্রস্থের অনুপাতে গণনা করা হয়। আমার উত্তরের একটি সম্পাদনায় আমি আরও গভীরতার উদাহরণটি দেখুন। আমার আপডেট হওয়া ডেমোটি 'নেস্টেড ফ্যাশন' প্রদর্শন করে যা আপনি বলছিলেন।

— ওয়েব_ডিজাইনার

সত্য যে তিনি প্রমাণ করেছেন যে এই কাজগুলি আমাকে বোঝাতে যথেষ্ট যে এটি এসও তে এখনও দেখা সবচেয়ে ভাল উত্তর iv। আমার লোকটিকে চিৎকার করে বলুন

Answer 2

vw ইউনিট:

আপনি উপাদানটির প্রস্থ এবং উচ্চতাvw উভয়ের জন্য ইউনিট ব্যবহার করতে পারেন । ভিউপোর্টের প্রস্থের ভিত্তিতে এটি উপাদানটির অনুপাতটিকে সংরক্ষণ করার অনুমতি দেয়।

ভিডব্লিউ: ভিউপোর্টের প্রস্থের 1/100 তম। [ এমডিএন ]

বিকল্পভাবে, আপনি vhভিউপোর্টের উচ্চতা বা এমনকি vmin/ vmaxভিউপোর্টের মাত্রাগুলির কম / বৃহত্তর ব্যবহার করতে পারেন ( এখানে আলোচনা )।

উদাহরণ: 1: 1 দিক অনুপাত

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

অন্যান্য দিক অনুপাতের জন্য, আপনি উপাদানটির প্রস্থ অনুযায়ী উচ্চতার মান গণনা করতে নিম্নলিখিত টেবিলটি ব্যবহার করতে পারেন:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

উদাহরণ: 4x4 গ্রিড স্কোয়ার ডিভ্স

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

এখানে একটি হল এই ডেমো সঙ্গে বেহালার এবং এখানে একটি করতে একটি সমাধান পাওয়া যাবে verticaly এবং horizontaly কেন্দ্রিক কন্টেন্ট সঙ্গে বর্গের প্রতিক্রিয়াশীল গ্রিড ।

---

ভিএইচ / ভিডাব্লিউ ইউনিটগুলির জন্য ব্রাউজার সমর্থনটি আই 9 9 + আরও তথ্যের জন্য ক্যান আইজ দেখুন

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। সম্ভবত এখনই নয়, ভবিষ্যতেও। VW ইউনিট করছে এখন অধিকাংশ ব্রাউজার সমর্থিত ।

— আগস্ট

@ বিবেকমহরজ দু'টি কৌশলই ভাল, প্রত্যেকের নিজস্ব মতামত রয়েছে। এক বা অন্যটি ব্যবহার পরিস্থিতির উপর নির্ভর করে।

— ওয়েব-টিকি 11

@ ওয়েব-টিকি, আপনি ঠিক বলেছেন। আমি একটি ইস্যু নিয়ে চলেছি - এটি ধরে নিয়েছে যে উপাদানটির প্রস্থটি ভিউপোর্টের প্রস্থের সাথে সমানুপাতিক, এটি যদি হবে না তবে 1) আপনার কাছে নির্দিষ্ট প্রস্থের জলের মতো জিনিস রয়েছে, বা 2) আপনার সর্বাধিক প্রস্থের সেট রয়েছে আপনার কিছু উপাদান জন্য।

— বিবেক মহারাজ

হতে পারে এটি কেবল ক্রোম ভি 47 বিটা, তবে আমি যখন ডিভটি সেট করি width:50%এবং height:50vwউচ্চতা প্রস্থের চেয়ে কিছুটা লম্বা হয়, তাই ঠিক 1: 1 অনুপাত নয়। কোন ধারনা?

— thdoan

@ 10basetom এটি একটি সাধারণ আচরণ। vw ইউনিটগুলিতে স্ক্রোলবার প্রস্থ থাকে যেখানে% প্রস্থ থাকে না। উচ্চতা এবং প্রস্থের পার্থক্য ব্রাউজারের উপর নির্ভর করে স্ক্রোলবারের আকারের উপর নির্ভর করবে।

— ওয়েব-টিকি

Answer 3

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

বলুন আপনার কাছে এম্বেড থাকা ভিডিও রয়েছে:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

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

এটি করার জন্য, আমি "ভিডিও" শ্রেণি বিভাগের মধ্যে এমবেড করা বস্তুর আগে একটি চিত্র রেখেছি।

!!! গুরুত্বপূর্ণ অংশটি হ'ল চিত্রটি সঠিক দিক অনুপাত রয়েছে যা আপনি বজায় রাখতে চান। এছাড়াও, আপনার লেআউটের উপর ভিত্তি করে ভিডিওটির (বা আপনি যা যা এআর বজায় রেখেছেন) যতটা ছোট আশা করছেন তার চেয়ে ছোট আকারের চিত্রটি যত কম হোক তা নিশ্চিত করুন। চিত্রটির পুনঃনির্মাণের সময় চিত্রের রেজোলিউশনে এটি কোনও সম্ভাব্য সমস্যা এড়াবে। উদাহরণস্বরূপ, আপনি যদি 3: 2 এর একটি অনুপাত বজায় রাখতে চান তবে কেবল 3px বাই 2px চিত্র ব্যবহার করবেন না। এটি কিছু পরিস্থিতিতে কাজ করতে পারে তবে আমি এটি পরীক্ষা করি নি এবং সম্ভবত এটি এড়ানো ভাল ধারণা হবে।

আপনার ওয়েবসাইটটির তরল উপাদানগুলির জন্য সংজ্ঞায়িত মতো আপনার ইতিমধ্যে ন্যূনতম প্রস্থ থাকতে হবে। যদি তা না হয় তবে ব্রাউজার উইন্ডোটি খুব ছোট হয়ে গেলে উপাদানগুলি কেটে ফেলা বা ওভারল্যাপ হওয়া এড়াতে এটি করা ভাল। কোনও সময় স্ক্রোল বার থাকা ভাল। কোনও ওয়েব পৃষ্ঠার যে প্রস্থের মধ্যে সবচেয়ে ছোট প্রস্থটি পাওয়া উচিত তা কোথাও কোথাও is 600px (কোনও স্থির প্রস্থের কলামগুলি সহ) হওয়া উচিত কারণ আপনি ফোন-বান্ধব সাইটগুলি ব্যবহার না করে স্ক্রিন রেজোলিউশন ছোট হয় না। !!!

আমি একটি সম্পূর্ণ স্বচ্ছ পিএনজি ব্যবহার করি তবে আমার মনে হয় না আপনি যদি এটি সঠিকভাবে করেন তবে বিষয়টি বিবেচনা করে শেষ হয়। এটার মত:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

এখন আপনার নীচের মত সিএসএস যুক্ত করতে সক্ষম হওয়া উচিত:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

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

এটি যেভাবে কাজ করে তা ভিডিও শ্রেণীর উপাদানের অবস্থানের বৈশিষ্ট্য এবং আপনি যে আইটেমটি চান সেটি একটি নির্দিষ্ট দিক অনুপাত বজায় রাখার উপর নির্ভর করে। কোনও উপাদানকে পুনরায় আকার দেওয়ার সময় কোনও চিত্র তার সঠিক দিক অনুপাত বজায় রাখার উপায়টি গ্রহণ করে। এটি চিত্র শ্রেণীর উপাদানগুলির প্রস্থ / উচ্চতাকে 100% এ ভিডিও দ্বারা সামঞ্জস্য করে গতিশীল চিত্র দ্বারা সরবরাহিত রিয়েল এস্টেটের পুরো-সুবিধা নিতে ভিডিও শ্রেণীর উপাদানগুলিতে যা আছে তা বলছে।

খুব সুন্দর, তাই না?

এটি আপনার নিজের ডিজাইনের সাথে কাজ করার জন্য আপনাকে এটির সাথে কিছুটা খেলতে হতে পারে তবে এটি আমার জন্য আশ্চর্যজনকভাবে কাজ করে। সাধারণ ধারণা আছে।

Answer 4

এলিয়ট আমাকে এই সমাধানে অনুপ্রাণিত করেছিল - ধন্যবাদ:

aspectratio.png আমার ক্ষেত্রে 30x10 পিক্সেলের ক্ষেত্রে আপনার পছন্দসই দিক-অনুপাতের আকারের সাথে একটি সম্পূর্ণ স্বচ্ছ পিএনজি-ফাইল।

এইচটিএমএল

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

সিএসএস 3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

দয়া করে নোট করুন: background-size এটি একটি CSS3- বৈশিষ্ট্য যা আপনার লক্ষ্য-ব্রাউজারগুলির সাথে কাজ না করে। আপনি আন্তঃক্রিয়াশীলতা পরীক্ষা করতে পারেন ( caniuse.com এ ফে )।

Answer 5

Web_Designer এর উত্তর যোগ করার জন্য, <div>প্রস্থ তা হচ্ছে 75% একটি উচ্চতা (সম্পূর্ণরূপে নীচে প্যাডিং গঠিত) থাকবে উপাদান ধারণকারী । এখানে একটি ভাল সংক্ষিপ্তসার: http://mattsnider.com/css-using-percent-for-margin- এবং- প্যাডিং / । আমি কেন নিশ্চিত হতে পারছি না কেন এটি হওয়া উচিত।

আপনি যদি আপনার ডিভিও 100% ব্যতীত প্রস্থ হতে চান তবে আপনার আরও একটি মোড়ক ডিভিও দরকার যা প্রস্থ নির্ধারণ করতে হবে:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

ডিভাইস রেজোলিউশনের উপর নির্ভর করে আমাকে আলাদা লোগো ফাইল পরিবেশন করতে সিএসএস মিডিয়া ক্যোয়ারীগুলি ব্যবহার করার অনুমতি দেওয়ার জন্য আমি ইলিয়টের চিত্র কৌশলটির অনুরূপ কিছু ব্যবহার করেছি, তবে <img>প্রাকৃতিকভাবে যেমন হবে তেমন আনুপাতিকভাবে স্কেল করুন (আমি লোগোটিকে স্বচ্ছ। সঠিক দিক অনুপাত সহ)। তবে ওয়েব_ডিজাইনারের সমাধানটি আমাকে একটি http অনুরোধ সংরক্ষণ করবে।

Comments

দুর্দান্ত সমাধান। আমার ক্ষেত্রে আমি "প্রাকৃতিক" চিত্রের আকারটি ডিওমে রাখার সময় জানি এবং ব্রাউজারের ছবিগুলি লোড হয়ে গেলে আরও স্ক্রোলিং প্রতিরোধ করার জন্য আমার সঠিক উচ্চতার সাথে একটি চিত্র স্থানধারক থাকা দরকার। .আর-বহির্ভাগে আমার চিত্রের প্রস্থটি পিক্সেলের মধ্যে রয়েছে .আর আমার প্যাডিং-নীচে বাস্তব চিত্রের অনুপাত থেকে অনুমান করা হয়। আর-ইনটারের পরিবর্তে আমার নিজের ইমেজটি রয়েছে (<img>)। তবে আমাকে শীর্ষ, নীচে, বাম এবং ডান স্থির পরিবর্তে প্রস্থটি 100% এ সেট করতে হয়েছিল। যখন আমি ম্যাক্সউইথকে আর-বাহ্যারে সেট করি তখন পিতামাতার ছোট হলে চিত্রটি খুব ভালভাবে স্কেল করে তবে তার প্রাকৃতিক আকারের চেয়ে বড় আকারে স্কেল করে না।

— মি-লা

Answer 6

W3schools.com এ এখানে যেমন বলা হয়েছে এবং কিছুটা এই গৃহীত উত্তরে পুনরুক্তি করা হয়েছে , প্যাডিং মানগুলি শতাংশ হিসাবে (জোর দেওয়া খনি):

সমন্বিত উপাদানটির প্রস্থের শতাংশের মধ্যে প্যাডিং নির্দিষ্ট করে

এরগো, একটি প্রতিক্রিয়াশীল ডিআইভির একটি সঠিক উদাহরণ যা একটি 16: 9 টির অনুপাত রাখে:

সিএসএস

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

এইচটিএমএল

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

জেএসফিডেলে ডেমো

Answer 7

@ ওয়েব-টিকি যেমন ইতিমধ্যে vh/ ব্যবহার করার উপায় দেখায় vw, আমার পর্দায় কেন্দ্রীভূত করার একটি উপায়ও প্রয়োজন, এখানে 9:16 প্রতিকৃতির জন্য একটি স্নিপেট কোড দেওয়া আছে ।

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateYএই কেন্দ্রটি স্ক্রিনে রাখবে। calc(100vw * 16 / 9)9/16 জন্য উচ্চতা প্রত্যাশিত। (100vw * 16 / 9 - 100vh)ওভারফ্লো উচ্চতা হয়, সুতরাং, টান আপ overflow height/2এটি পর্দায় এটি কেন্দ্র করে রাখবে।

আড়াআড়ি জন্য এবং 16: 9 রাখুন , আপনি ব্যবহার দেখান

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

9/16 অনুপাতটি পরিবর্তন করা সহজ, পূর্বনির্ধারিত প্রয়োজন হয় না 100:56.25বা। 100:75আপনি যদি উচ্চতাটি নিশ্চিত করতে চান তবে আপনার প্রস্থ এবং উচ্চতা স্যুইচ করা উচিত, যেমন height:100vh;width: calc(100vh * 9 / 16)9:16 প্রতিকৃতির প্রতিকৃতি।

আপনি যদি বিভিন্ন স্ক্রিন আকারের জন্য মানিয়ে নিতে চান তবে আপনার আগ্রহও থাকতে পারে

• পটভূমি আকারের কভার / ধারণ করে
  • উপরে শৈলী ধারণার মতো, প্রস্থের উপর নির্ভর করে: উচ্চতার অনুপাত।
• অবজেক্ট হইয়া
  • আইএমজি / ভিডিও ট্যাগের জন্য কভার / অন্তর্ভুক্ত
• @media (orientation: portrait)/@media (orientation: landscape)
  • অনুপাত পরিবর্তন portrait/ landscapeকরার জন্য মিডিয়া ক্যোয়ারী ।

Answer 8

এটি গৃহীত উত্তরের একটি উন্নতি:

• মোড়ক ডিভের পরিবর্তে সিউডো উপাদান ব্যবহার করে
• দিক অনুপাতটি তার পিতামাতার পরিবর্তে বাক্সের প্রস্থের উপর ভিত্তি করে
• কন্টেন্ট লম্বা হয়ে গেলে বাক্সটি উল্লম্বভাবে প্রসারিত হবে

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

Comments

বাক্সের উল্লম্ব প্রসারকে কীভাবে অক্ষম করবেন? কঠোরভাবে একটি স্ট্র্যাচিং ডিভ কথা বলার সাথে তার অনুপাতটি বজায় থাকে না

— ফ্লোরিয়ান

যদি সামগ্রীটি প্রত্যাশিত উচ্চতার চেয়ে লম্বা হয় তবে বাক্সটি উল্লম্বভাবে প্রসারিত হবে। এই ধারণাটি এমন সামগ্রীর সাথে সবচেয়ে বেশি ব্যবহৃত হয় যা তার পিতামাতার মাত্রা যেমন ভিডিও এবং চিত্রগুলির সাথে মেলে ধরে প্রসারিত করতে পারে।

— সালমান এ

Answer 9

আমি এবং স্মার্ট সমাধানটি ব্যবহার করে হোঁচট খেয়েছি ।<svg>display:grid

গ্রিড উপাদান আপনাকে দুটি (বা আরও) উপাদান দিয়ে একই স্থান দখল করতে দেয়, কোনটি উচ্চতা নির্ধারণ করে তা নির্দিষ্ট করে না দিয়ে। যার অর্থ, বাক্সের বাইরে, লম্বাটি অনুপাত নির্ধারণ করে ।

এর অর্থ আপনি এটি ব্যবহার করতে পারবেন ঠিক যখনই আপনি জানেন যে সামগ্রীতে কখনই পুরো "অনুপাত" পূরণ করার মতো যথেষ্ট দীর্ঘ হবে না এবং আপনি কেবল এই স্থানটিতে সামগ্রীর অবস্থান নির্ধারণের জন্য একটি উপায় খুঁজছেন (অর্থাত উভয় দিকের নির্দেশকে কেন্দ্র করে) display:flex; align-items:center; justify-content:center)।
এটি হালকা এবং সংশোধন করা যথেষ্ট সহজ ( বাদে অনুপাতটি পরিবর্তনের জন্য, আপনার প্রয়োজন হওয়া উচিত) বাদে স্বচ্ছ এবং পূর্বনির্ধারিত অনুপাতের <img>সাথে ব্যবহার করার মতোই এটি একই রকম ।display:block<svg>

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

আপনাকে যা করতে হবে তা হ'ল <svg>এস অনুপাত পরিবর্তন করা :

• <svg viewBox="0 0 4 3"></svg>
• <svg viewBox="0 0 16 9"></svg>

এটি কাজ করে দেখুন:

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    Fixed ratio 7:1
  </div>
</div>

---

যদি আপনার এমন কোনও সমাধানের প্রয়োজন হয় যেখানে লম্বা হওয়ার সময় সামগ্রীর উপাদানটিকে অনুপাত সেট করার অনুমতি দেওয়া হয় না (ওভারফ্লো লুকানো বা অটো সহ) position:relativeআপনার গ্রিডে এবং position:absolute; height:100%; overflow-y: auto;সামগ্রীটিতে সেট করতে হবে । উদাহরণ:

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1/1/1;
}


.ratio > div {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  
  /* the rest is not needed */
  border: 1px solid red;
  padding: 0 1rem;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.

<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.

<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
  </div>
</div>

Answer 10

আপনার সমাধানগুলির উপর ঝাঁকুনি আমি কিছু কৌশল তৈরি করেছি:

আপনি যখন এটি ব্যবহার করবেন, আপনার HTML কেবল হবে

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

এটি এইভাবে ব্যবহার করতে করুন: সিএসএস:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

এবং জেএস (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

এবং এটি থাকার পরে আপনি কেবল data-keep-ratioউচ্চতা / প্রস্থের জন্য অ্যাট্রি সেট করেন এবং এটিই।

Comments

আপনার ব্যবহার করা উচিত data-keep-ratioনয় keep-ratioএবং এর মানটি ব্যবহার করা উচিত$(this).data('keep-ratio');

— রবার্ট

আপনার কোড এখন কাজ করছে এবং সম্ভবত চিরকালের জন্য কাজ করবে তবে এটি স্ট্যান্ডার্ড নয় এবং ব্রাউজারগুলি ভবিষ্যতে যে কোনও সময় এটির সমর্থন বন্ধ করতে পারে

— রবার্ট

এখানে জেএস ব্যবহার করা খারাপ সংবাদের কারণ হবে!

— আমির হোসেইন আহমদী

Answer 11

আপনি একটি এসভিজি ব্যবহার করতে পারেন। ধারক / মোড়কের অবস্থানটিকে আপেক্ষিক করে তুলুন, প্রথমে স্থির অবস্থান হিসাবে এসভিজি রাখুন এবং তারপরে একেবারে অবস্থানযুক্ত সামগ্রী রাখুন (শীর্ষ: 0; বাম: 0; ডান: 0; নীচে: 0;)

16: 9 অনুপাত সহ উদাহরণ:

image.svg: (এসআরসি-তে অন্তর্ভুক্ত করা যেতে পারে)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

সিএসএস:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

এইচটিএমএল:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

নোট করুন যে ইনলাইন এসভিজি তেমন কাজ করে না বলে মনে হচ্ছে তবে আপনি এসভিজিটি ইউলিনকোড করতে এবং এটি ইমগ এসসিআর বৈশিষ্ট্যে এম্বেড করতে পারেন:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

Answer 12

আমার ক্ষেত্রে এসসিএসএসই সেরা সমাধান; একটি ডেটা অ্যাট্রিবিউট ব্যবহার করে:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

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

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

সূত্র

Comments

শুধু এফওয়াইআই ... আপনি প্লেইন সিএসএস ব্যবহার করে ঠিক একই পরিমাণ লাইনে এই সঠিক জিনিসটি (অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে) করতে পারেন। [data-aspect-ratio]অ্যাট্রিবিউট নির্বাচক CSS এর মাধ্যমে আপনি উপলব্ধ।

— রিনিভিয়াস

Answer 13

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

পুরোপুরি পোর্টেবল এবং পুনরায় আকারের সমাধান আনতে আমি তাদের একসাথে করার চেষ্টা করেছি ... কৌশলটি একটি চিত্রের স্বয়ংক্রিয় স্কেলিংয়ের জন্য ব্যবহার করা হয় তবে প্রাক-রেন্ডার করা চিত্র বা কোনও রূপের পরিবর্তে একটি ইনলাইন এসভিজি উপাদান ব্যবহার করা হয় The দ্বিতীয় HTTP অনুরোধ ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

লক্ষ্য করুন যে আমি এসভিজির প্রস্থ এবং উচ্চতার বৈশিষ্ট্যে বড় মানগুলি ব্যবহার করেছি, কারণ এটি সর্বাধিক প্রত্যাশিত আকারের চেয়ে বড় হওয়া দরকার কারণ এটি কেবল সঙ্কুচিত হতে পারে। উদাহরণটি ডিভের অনুপাত 10: 5 করে

Answer 14

শুধু একটি ধারণা বা একটি হ্যাক।

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

Comments

এটি কোনও সিএসএস-কেবল সমাধান নয় ... এখন, আপনি যদি ছদ্ম উপাদানটিতে একটি বেস 64 এনকোডযুক্ত চিত্র ব্যবহার করতেন তবে এটি একটি দুর্দান্ত সমাধান হত।

— রিনিভিয়াস

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

— অরল্যান্ড

সিউডো উপাদান কাজ করবে কিনা তা আমি নিশ্চিত নই। আমি এই সমাধানটির কাজটির সমাধানের দিকটি অনুপাত রাখতে img উপাদানটির সম্পত্তি ব্যবহার করেছি।

— অরল্যান্ড

দুর্দান্ত, তবে এটি যখন প্রস্থ পরিবর্তন করবে তখনই এটি একটি উচ্চতা গণনা করে। এটি উভয় উপায়েই করা উচিত, সুতরাং যখন আমি উচ্চতা হ্রাস করি তখন প্রস্থটিও পুনরায় গণনা করা হয়। অন্যথায় এটি অকেজো ..

— মেগা

Answer 15

আসুন আপনাকে বলুন যে আপনার কাছে 2 ডিভ রয়েছে আউটর ডিভ একটি ধারক এবং অভ্যন্তরীণ কোনও উপাদান হতে পারে যা আপনাকে তার অনুপাত রাখতে হবে (আইএমজি বা ইউটিউব যদি আইফ্রেমে বা যাই হোক না কেন)

এইচটিএমএল দেখে মনে হচ্ছে:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

যাক আপনাকে "এলিমেন্ট" এর অনুপাত রাখতে হবে

অনুপাত => 4 থেকে 1 বা 2 থেকে 1 ...

সিএসএস এর মত দেখাচ্ছে

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

প্যাডিং যখন% তে নির্দিষ্ট করা হয় এটি প্রস্থের উচ্চতার উপর ভিত্তি করে গণনা করা হয়। .. সুতরাং মূলত আপনি এটি বিবেচনা করবেন না যে আপনার প্রস্থের দৈর্ঘ্যের উচ্চতা সর্বদা এর ভিত্তিতে গণনা করা হবে। যা অনুপাত রাখবে।

Answer 16

আপনি যদি পোর্ট্রেট বা ল্যান্ডস্কেপ ভিউতে ভিউপোর্টের অভ্যন্তরে একটি বর্গক্ষেত্র ফিট করতে চান (যতটা সম্ভব বৃহত, তবে বাইরে স্টিকিং কিছুই নেই), vw/ vhওরিয়েন্টেশন portrait/ landscape: ব্যবহার করে পরিবর্তন করুন

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

Answer 17

আমি আমার সমাধানটি ভাগ করতে চাই, যেখানে আমার imgএকটি নির্দিষ্ট দিক অনুপাত পূরণ করার একটি-ট্যাগ রয়েছে। আমি ব্যবহার করতে পারি নি background, CMS সমর্থন অভাবে এবং আমি তাই মত একটি শৈলী ট্যাগ ব্যবহার করতে পছন্দ করতাম: <img style="background:url(...)" />। এছাড়াও, প্রস্থটি 100%, সুতরাং সমাধানের মতো এটি কোনও নির্দিষ্ট আকারে সেট করার দরকার নেই। এটি প্রতিক্রিয়াশীলভাবে স্কেল হবে!

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}

<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>

Answer 18

আমি বেশ কয়েকবার এই সমস্যাটিতে চলে এসেছি, সুতরাং আমি এর জন্য একটি জেএস সমাধান করেছি। এটি আপনার অনুপাত অনুসারে মূলত উপাদানটির প্রস্থ অনুসারে ডোমলেমেন্টের উচ্চতা সামঞ্জস্য করে। আপনি এটি অনুসরণ হিসাবে ব্যবহার করতে পারেন:

<div ratio="4x3"></div>

দয়া করে সচেতন হন যেহেতু এটি উপাদানটির উচ্চতা নির্ধারণ করছে, সুতরাং উপাদানটি একটি display:blockবা এক হওয়া উচিত display:inline-block।

https://github.com/JeffreyArts/html-ratio-component

Comments

যদিও আমি আপনার কোডটি দেখতে বা চেষ্টা করে দেখিনি (আমার ইতিমধ্যে আমার নিজস্ব আছে) আমি আপনার উত্তরটি কেবলমাত্র এইমাত্র একটি নির্ভরযোগ্য সমাধান, একটি জেএস স্ক্রিপ্ট উপস্থাপন করার জন্যই আপলোড করেছি।

— থিও ডি'অর

প্রশ্নটি সুনির্দিষ্টভাবে এমন একটি সমাধান চেয়েছিল যার জাভাস্ক্রিপ্টের দরকার নেই।

— ফ্লিম

Answer 19

আপনি এসভিজি ব্যবহার করে এটি অর্জন করতে পারেন।

এটি কোনও ক্ষেত্রে নির্ভর করে তবে কিছু ক্ষেত্রে এটি সত্যই কার্যকর। উদাহরণ হিসাবে - আপনি background-imageনির্দিষ্ট উচ্চতা নির্ধারণ না করে সেট করতে পারেন বা <iframe>অনুপাত 16:9এবং position:absoluteইত্যাদি সহ ইউটিউব এম্বেড করতে এটি ব্যবহার করতে পারেন etc.

3:2অনুপাত সেট viewBox="0 0 3 2"এবং এর জন্য ।

উদাহরণ:

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

Answer 20

বলুন যে আপনি প্রস্থ: 100px এবং উচ্চতা: 50px বজায় রাখতে চান (অর্থাত, 2: 1) কেবল এই গণিতটি করুন:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}

Answer 21

আপনি ফ্লাক্স লেআউট (FWD) ব্যবহার করতে পারেন।

https://en.wikipedia.org/wiki/Adaptive_web_design

এটি লেআউটটিকে স্কেল এবং বজায় রাখবে, এটি কিছুটা জটিল তবে কোনও পৃষ্ঠা (আরডাব্লুডি) এর মতো সামগ্রীকে চাপ না দিয়ে পুনরায় আকার দেওয়ার অনুমতি দেয়।

দেখে মনে হচ্ছে প্রতিক্রিয়াযুক্ত তবে এটি স্কেলিং করছে। https://www.youtube.com/watch?v=xRcBMLI4jbg

আপনি এখানে সিএসএস স্কেলিং সূত্রটি খুঁজে পেতে পারেন:

http://plugnedit.com/pnew/928-2/

Comments

কিভাবে এই প্রশ্নের উত্তর দেয়?

— ফ্লিম 15

Answer 22

ক্যানভাস উপাদান ব্যবহার করে, অনুপাতের রক্ষণাবেক্ষণের একটি সহজ উপায়।

ক্রিয়ায় এটি দেখতে নীচের ডিভকে পুনরায় আকার দেওয়ার চেষ্টা করুন।

আমার জন্য, এই পদ্ধতিটি সর্বোত্তমভাবে কাজ করেছে, তাই আমি এটি অন্যদের সাথে ভাগ করে নিচ্ছি যাতে তারাও এটি থেকে উপকৃত হতে পারে।

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

গতিশীল উচ্চতার সাথেও কাজ করে!

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

Comments

yup আমার জন্য সাহায্য করেছে, আমি এখন এটি চিত্র পিতামাতার দ্বি উচ্চতা সেট আপ করতে ব্যবহার করতে পারি)

— অ্যালেক্স

Answer 23

আমি একটি নতুন সমাধান ব্যবহার করেছি।

.squares{
  width: 30vw
  height: 30vw

মূল দিক অনুপাত

.aspect-ratio
  width: 10vw
  height: 10vh

তবে এটি পুরো ভিউপোর্টের সাথে সম্পর্কিত। সুতরাং, আপনার যদি ভিউপোর্টের প্রস্থের 30% দৈর্ঘ্যের একটি ডিভ প্রয়োজন হয় তবে আপনি পরিবর্তে 30vw ব্যবহার করতে পারেন এবং যেহেতু আপনি প্রস্থটি জানেন তাই আপনি ক্যালক এবং ভিডাব্লু ইউনিট ব্যবহার করে তাদের উচ্চতায় পুনরায় ব্যবহার করতে পারেন।

Comments

এটি কি দ্বিতীয়-সর্বোচ্চ রেট করা উত্তরটি ইতিমধ্যে উল্লিখিত হয়েছে?

— রিনিভিয়াস

Answer 24

ওয়েল, আমরা সম্প্রতি aspect-ratioCSS এ সম্পত্তি ব্যবহার করার ক্ষমতা পেয়েছি ।

https://twitter.com/Una/status/1260980901934137345/photo/1

দ্রষ্টব্য: সমর্থন এখনও সেরা নয় ...

https://caniuse.com/#search=aspect-ratio

Answer 25

যদি পুরো ধারক কাঠামোটি শতাংশ ভিত্তিক হয় তবে এটি পূর্বনির্ধারিত আচরণ হবে, আপনি আরও নির্দিষ্ট উদাহরণ প্রদান করতে পারেন?

নীচে আমি কী বোঝাতে চাইছি তার একটি উদাহরণ দেওয়া হল, যদি আপনার সম্পূর্ণ প্যারেন্ট হায়ারার্কি% ভিত্তিক হয় তবে কোনও ব্রাউজার উইন্ডো সমন্বয় কোনও অতিরিক্ত জেএস / সিএসএস ছাড়াই কাজ করবে, এটি কি আপনার বিন্যাসের সাথে সম্ভাবনা নয়?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>

Comments

মূল প্রশ্নে আমার সম্পাদনা দেখুন। আমি দেখতে পাচ্ছি না যে এই কৌশলটি অনুপাতের অনুপাতটি কোথায় রাখবে, উচ্চতা পরিবর্তন হবে না।

— জ্যাকব