object-fit প্রোপার্টি



সিএসএস object-fit প্রোপার্টি ব্যবহার করে কোন <img> বা <video> কে তার কন্টেইনার অনুসারে মাপ পরিবর্তন বা resized করা যায়।


ব্রাউজার সাপোর্ট

নিচের টেবিলের সংখ্যাগুলো সেই প্রথম ব্রাউজার সংস্করণটিকে নির্দেশ করে যা object-fit প্রপার্টি সম্পূর্ণরুপে সমর্থন করে।

প্রপার্টি
object-fit 31.0 16.0 36.0 7.1 19.0


object-fit প্রোপার্টি

object-fit প্রপার্টি নির্ধারণ করে কিভাবে কোন <img> বা <video> তার কন্টেইনার মাপ পরিবর্তন করবে বা resize হবে।

এই প্রপার্টি কন্টেন্টকে বিভিন্ন ভাবে কন্টেইনার পূর্ণ করতে নির্দেশ করে, যেমন দৈর্ঘ্য ও প্রস্থের অনুপাত ঠিক রেখে কন্টেইনার পূর্ণ করতে হবে।

নিচে একটি উদাহরণ দেখুন, এখানে আমরা 400px X 200px

Object Fit

এখন যদি ছবিটিকে 200X400 px এ resize করি তবে টা দেখতে নিচের মত হবে।

Object Fit

উদাহরণ

img {
width: 200px;
height: 200px;
}


আমরা দেখলাম যে 200X200 px এ resize করার ফলে ছবিটির দৈর্ঘ্য ও প্রস্থের অনুপাত নষ্ট হয়ে গেছে ও ছবিতি squeezed বা চাপা হয়ে প্রদর্শিত হল।

যদি আমরা object-fit প্রপার্টি ব্যবহার করি এবং এর মান হিসেবে cover নির্ধারণ করি তবে ছবিটি একদিক বাদপরে যায়, অনুপাত ঠিক রেখেই নির্ধারিত স্থান পূর্ণ করে। নিচে দেখুন।

Object Fit

উদাহরণ

img {
width: 200px;
height: 400px;
object-fit: cover;
}




object-fit প্রপার্টির সকল মান

object-fit প্রপার্টির জন্য যে সকল মাননির্ধারণ করা যায় সেগুলো নিচে দেখুন।

fill - এটি স্বয়ংক্রিয় বা default মান। প্রতিস্থাপিত বা replace কন্টেন্টটি কন্টেইনার পূর্ণ করার আকার নেয়। যদি প্রয়োজন হয় তবে কন্টেন্টটি টানা বা stretched অর্থাৎ বিস্তৃত অথবা চাপা বা squished হতে পারে।
contain - প্রতিস্থাপিত বা replace কন্টেন্টটি আনুপাতিক হারে এলিমেন্ট কন্টেইনার পূর্ণ করে।
cover - প্রতিস্থাপিত বা replace কন্টেন্টটি এর অনুপাত ঠিক রেখে এলিমেন্ট কন্টেন্ট বক্স পূর্ণ করে। প্রয়োজনে বাড়তি অংশ বাদ বা clip করে।
none - প্রতিস্থাপিত বা replace কন্টেন্টটি resize হয় না।
scale-down - কন্টেন্টটি এমন ভাবে আকার নেয় যেন কোন কন্টেইনার নির্দিষ্ট করা হয় নি।

নিচে উদাহরণ দেখুন যেখানে object-fit প্রপার্টির সকল সম্ভাব্য মান দেখানো হয়েছে।

উদাহরণ

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.