বিকাশকারীরা অন্যান্য এইচটিএমএল উপাদানগুলির সাথে সম্পর্কিত চিত্রের ক্রম এবং মাত্রা নির্ধারণ করে একটি স্পষ্ট চাক্ষুষ শ্রেণিবিন্যাস স্থাপনের জন্য একটি চিত্রের অবস্থান নির্ধারণ করে। ইমেজটিকে বিভিন্ন অবস্থানে রাখার মাধ্যমে, আধুনিক, অনন্য এবং কাস্টম ডিজাইনও তৈরি করা যেতে পারে যা ওয়েবসাইটের চেহারা এবং অনুভূতি পরিবর্তন করতে পারে। এই নিবন্ধটি CSS ব্যবহার করে একটি চিত্রের অবস্থান নির্ধারণের পদ্ধতি প্রদর্শন করে।
কিভাবে CSS এ একটি ছবির অবস্থান নির্ধারণ করবেন?
সিএসএস-এ একটি ছবির অবস্থান নির্ধারণ করে, 'এর মতো সুবিধাগুলি সুনির্দিষ্ট বসানো ', ' ওভারল্যাপিং উপাদান ' এবং ' প্রতিক্রিয়াশীল নকশা ' সহজেই অর্জন করা যায়। এই সুবিধাগুলি ব্যবহার করে, বিকাশকারীরা সহজেই কাস্টমাইজ করতে এবং একটি সম্পূর্ণ কার্যকরী এবং নজরকাড়া ওয়েবসাইট তৈরি করতে পারে। দুটি পদ্ধতি/বৈশিষ্ট্য রয়েছে যার মাধ্যমে একটি চিত্রের অবস্থান নির্ধারণ করা যায়। এই বৈশিষ্ট্যগুলি নীচে বর্ণনা করা হয়েছে:
পদ্ধতি 1: ফ্লোট প্রপার্টি ব্যবহার করা
দ্য ' ভাসা এইচটিএমএল উপাদানের নড়াচড়ার জন্য সিএসএস দ্বারা সম্পত্তি প্রদান করা হয়। বাম 'বা' অধিকার ' অভিমুখ. এইচটিএমএল উপাদানগুলির সুনির্দিষ্ট স্থান নির্ধারণের জন্য প্রতিক্রিয়াশীল বিন্যাস তৈরি করার সময় এটি বেশিরভাগই ব্যবহার করা হয়।
উদাহরণস্বরূপ, 'ফ্লোট' বৈশিষ্ট্যটি ওয়েবপৃষ্ঠার বাম এবং ডান উভয় দিকের চিত্রগুলি সারিবদ্ধ করার জন্য ব্যবহার করা হয়:
< div >
< img src = 'bg.jpg' উচ্চতা = '300px' প্রস্থ = '400px' ক্লাস = 'অবস্থান সঠিক' >
< img src = 'book.jpg' উচ্চতা = '300px' প্রস্থ = '400px' ক্লাস = 'অবস্থান বাম' >
div >
উপরের কোডে:
-
- প্রথমত, মূল ' div ” এলিমেন্ট তৈরি করা হয় যা HTML এলিমেন্টের জন্য একটি ধারক হিসেবে কাজ করে।
- পরবর্তী, দুই '
'ট্যাগগুলি' এর ভিতরে ব্যবহার করা হয়
ট্যাগ- এর পরে, 'এর মান 300px ' এবং ' 400px 'কে প্রদান করা হয়' উচ্চতা ' এবং ' প্রস্থ 'উভয়ের বৈশিষ্ট্য'
' ট্যাগ.
- এছাড়াও, 'এর একটি ক্লাস বরাদ্দ করুন অবস্থান সঠিক ' এবং ' অবস্থান বাম ” প্রথম এবং দ্বিতীয় “
” ট্যাগে, যথাক্রমে।
এখন লিখুন ' <স্টাইল> নিম্নলিখিত CSS বৈশিষ্ট্য প্রয়োগ করতে ট্যাগ:
< শৈলী >
অবস্থান ঠিক {
float: ডান;
}
বাম অবস্থান {
float: বাম;
}
শৈলী >
বর্ণনা নিচে দেওয়া হল:
-
- প্রথমে, নির্বাচন করুন ' অবস্থান সঠিক 'ক্লাস করুন এবং 'এর মান সেট করুন অধিকার ' এটিতে ' ভাসা 'সম্পত্তি। এটি নির্বাচিত HTML উপাদানটিকে ওয়েবপেজে সঠিক দিকে নিয়ে যায়।
- এরপরে, নির্বাচন করুন ' অবস্থান বাম 'শ্রেণী এবং 'এর মান প্রদান করুন বাম 'এর কাছে' ভাসা 'সম্পত্তি। এটি উপাদানটিকে বাম দিকের দিকে নিয়ে যায়।
সংকলন পর্ব শেষ হওয়ার পরে:
আউটপুট দেখায় যে ছবিগুলি বাম এবং ডান অবস্থানে সেট করা হয়েছে।পদ্ধতি 2: অবজেক্ট-পজিশন প্রপার্টি ব্যবহার করা
দ্য ' বস্তুর অবস্থান ” প্রপার্টি ওয়েবপেজে একটি নির্দিষ্ট অবস্থানে ইমেজ বা এইচটিএমএল এলিমেন্টের স্থাপন নিশ্চিত করে। এটি অনুভূমিক এবং উল্লম্ব অবস্থানের উপর নিয়ন্ত্রণ দেয়, ব্যবহারকারীকে পছন্দসই চাক্ষুষ প্রভাব বা বিন্যাস অর্জন করতে দেয়। এটি বেশিরভাগ ডেভেলপাররা ইমেজ ক্রপিং, থাম্বনেল তৈরি, কাস্টম লেআউট ইত্যাদির জন্য ব্যবহার করে।
এই সম্পত্তি সংখ্যাসূচক এবং কীওয়ার্ড উভয় মান নিতে পারে। উদাহরণস্বরূপ, সংখ্যাসূচক এবং কীওয়ার্ড উভয় মানই 'এর জন্য প্রদান করা হয় বস্তুর অবস্থান 'সম্পত্তি। এটি নীচের কোড স্নিপেটে CSS-এ একটি চিত্রের অবস্থান সেট করে:
< শৈলী >
সংখ্যাসূচক মান
{
অবজেক্ট-পজিশন: 100px 20px;
}
.keyword Values
{
অবজেক্ট-পজিশন: বাম;
}
শৈলী >
< শরীর >
< div >
< img src = 'book.jpg' উচ্চতা = '300px' প্রস্থ = '400px' ক্লাস = 'কীওয়ার্ড ভ্যালুস' >
< img src = 'bg.jpg' উচ্চতা = '300px' প্রস্থ = '400px' ক্লাস = 'সংখ্যাসূচক মান' >
div >
শরীর >
উপরের কোড স্নিপেটে:-
- প্রথমত, ' সংখ্যাগত মান ' ক্লাস সিলেক্ট করা হয়েছে ' <স্টাইল> ট্যাগ এবং 'এর সংখ্যাসূচক মান 100px 20px 'সিএসএস প্রদান করা হয়' বস্তুর অবস্থান 'সম্পত্তি। দ্য ' 100px ' হল অনুভূমিক দিকে যোগ করা স্থান এবং ' 20px 'উল্লম্ব জন্য.
- পরবর্তী, ' কীওয়ার্ড ভ্যালু ” ক্লাস সিলেক্ট করা হয়েছে এবং “এর কীওয়ার্ড ভ্যালু বাম 'কে প্রদান করা হয়' বস্তুর অবস্থান ” বাম দিকের দিকে চিত্রটিকে সারিবদ্ধ করার বৈশিষ্ট্য।
- এর পরে, ভিতরে ' ” ট্যাগ দুটি ছবি তৈরি করা হয়, এবং উপরে তৈরি করা ক্লাসগুলি তাদের জন্য বরাদ্দ করা হয়।
সংকলন পর্ব শেষ হওয়ার পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:
স্ন্যাপশটটি দেখায় যে চিত্রগুলি এখন নির্দিষ্ট অবস্থানে সেট করা হয়েছে৷উপসংহার
একটি ছবির অবস্থান CSS ব্যবহার করে সেট করা যেতে পারে “ ভাসা ' এবং ' বস্তুর অবস্থান ' বৈশিষ্ট্য। দ্য ' ভাসা ” সম্পত্তি একটি মান হিসাবে কীওয়ার্ড নেয় এবং উপাদানটিকে বাম বা ডান অবস্থানে নিয়ে যায়। অন্যদিকে, “ বস্তুর অবস্থান ”, অনুভূমিক এবং উল্লম্ব দিকনির্দেশে কীওয়ার্ড এবং সংখ্যাসূচক উভয় মানই নেয়। এই নিবন্ধটি CSS-এ একটি চিত্রের অবস্থান নির্ধারণের পদ্ধতি প্রদর্শন করেছে।
- এর পরে, 'এর মান 300px ' এবং ' 400px 'কে প্রদান করা হয়' উচ্চতা ' এবং ' প্রস্থ 'উভয়ের বৈশিষ্ট্য'