如何保持宽高比

学习如何使用 CSS 保持元素的宽高比。

কিভাবে করবেন - উচ্চতা সমান হয় একই প্রক্ষেপণ

প্রথম পদক্ষেপ - এইমএল যোগ করুন:

কনটেনার ইলিমেন্ট, যেমন <div>এবং, যদি আপনি টেক্সট রাখতে চান, তবে একটি সাব-এলিমেন্ট যোগ করুন:

<div class="container">
  <div class="text">Some text</div> <!-- যদি আপনি কনটেনারের ভিতরে টেক্সট রাখতে চান -->
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

এটি padding-top শতকরা মান যোগ করে, DIV-এর প্রক্ষেপণ অনুপাত রাখতে পারেন।উদাহরণস্বরূপ, 1:1 প্রক্ষেপণ অনুপাত সৃষ্টি করতে পারেন:

উদাহরণ - 1:1 প্রক্ষেপণ অনুপাত

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 প্রক্ষেপণ অনুপাত */
  position: relative; /* যদি আপনি ভিতরের টেক্সট রাখতে চান */
}
/* যদি আপনি কনটেনারের ভিতরে টেক্সট রাখতে চান */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

আপনার নিজেই প্রয়োগ করুন

অন্যান্য প্রক্ষেপণ অনুপাত

উদাহরণ - 16:9 প্রক্ষেপণ অনুপাত

.container {
  padding-top: 56.25%; /* 16:9 প্রক্ষেপণ অনুপাত (9 ভাগ বাঁচানো 16 থেকে 0.5625) */
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ - 4:3 প্রক্ষেপণ অনুপাত

.container {
  padding-top: 75%; /* 4:3 প্রক্ষেপণ অনুপাত (3 ভাগ বাঁচানো 4 থেকে 0.75) */
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ - 3:2 প্রক্ষেপণ অনুপাত

.container {
  padding-top: 66.66%; /* 3:2 প্রক্ষেপণ অনুপাত (2 ভাগ বাঁচানো 3 থেকে 0.6666) */
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ - 8:5 প্রক্ষেপণ অনুপাত

.container {
  padding-top: 62.5%; /* 8:5 প্রক্ষেপণ অনুপাত (5 ভাগ বাঁচানো 8 থেকে 0.625) */
}

আপনার নিজেই প্রয়োগ করুন

CSS aspect-ratio 属性

নতুন ব্রাউজারগুলিতে, আপনি সহজেই CSS ব্যবহার করতে পারেন aspect-ratio বৈশিষ্ট্য:

উদাহরণ - 3:2 প্রক্ষেপণ অনুপাত

.container {
  aspect-ratio: 3 / 2;
}

আপনার নিজেই প্রয়োগ করুন

তালিকায় সম্পূর্ণভাবে এই বৈশিষ্ট্যকে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি উল্লেখ করা হয়েছে。