CSS ক্রপ করা ছবি

CSS-এ ছবি ক্রপ করার বিভিন্ন উপায় রয়েছে; যাইহোক, এর মধ্যে সবচেয়ে সহজ এবং সবচেয়ে কার্যকর হল:

অবজেক্ট-ফিট ব্যবহার করা:

object-fit: cover ব্যবহার করার সময় , আমরা সহজেই ছবিটি ক্রপ করতে পারি এবং এখনও ছবির আকৃতির অনুপাত বজায় রাখতে পারি।

আপনি object-fit ব্যবহার করতে পারেন সাথে object-position CSS এ একটি ছবি ক্রপ করতে। object-fit সেট করার চেষ্টা করুন none একটি ছবির উপর সম্পত্তি এবং তারপর object-position: 50% 50% সেট করুন . এটি ধারকটিতে চিত্রটিকে কেন্দ্রীভূত করবে। প্রথম সংখ্যাটি নির্দেশ করে যে ছবিটি বাম থেকে কত দূরে রাখতে হবে এবং দ্বিতীয়টি নির্দেশ করে যে ছবিটি উপরে থেকে কত দূরে রাখতে হবে৷

ব্যাকগ্রাউন্ড-ইমেজ ব্যবহার করা:

<div> সেট করুন আপনি চান আপনার ছবিতে একটি background-image: url(<insert url here>) সম্পত্তি উপরন্তু, background-size সেট করুন cover করতে এটি ক্রপ করতে যাতে আকৃতির অনুপাত বজায় থাকে। background-position top left ডিফল্ট করা হয় .

এটি ব্যবহার করার একমাত্র সমস্যা হল অ্যাক্সেসিবিলিটি উদ্বেগ। ব্যাকগ্রাউন্ড-ছবি অগত্যা স্ক্রিন রিডারদের দ্বারা পড়া হয় না, তাই যদি ব্যবহৃত চিত্রটি সাইটের সামগ্রিক উদ্দেশ্যের জন্য গুরুত্বপূর্ণ হয়, আমি হয় আপনার পৃষ্ঠার ছবিতে কী ঘটছে তা বর্ণনা করব বা অন্য বিকল্প বেছে নেব।

প্রস্থ এবং উচ্চতা, মার্জিন এবং ওভারফ্লো ব্যবহার করা:

On the container your <img> is in (probably a <div> কিছু ধরণের), অবস্থানটিকে আপেক্ষিক এবং ওভারফ্লোকে লুকানোতে সেট করুন। আপেক্ষিক অবস্থানটি মূলত ছবিটির চারপাশে একটি বেড়া রাখে যাতে এটির নির্দিষ্ট সীমানা থাকে এবং তারপরে ওভারফ্লো সম্পত্তি সেই বেড়া অতিক্রম করে যা কিছু লুকিয়ে রাখে।

নিচের কোড এডিটরে আপনি বিভিন্ন উপায়ে আপনার ছবি ক্রপ করতে পারেন তা আমি দেখিয়েছি:

       
 
স্বাভাবিক
 
  
 
টপ ক্রপড
 
   
নিচে এবং উপরে ক্রপ করা
 
  
 
ডান কাটা
 
  
  
 
বাম এবং ডানে কাটা
 
  
 
স্কোয়ার ক্রপ
 
 "/body /প্রে> 

 এইচটিএমএল-এ ক্লাসের নাম বৈশিষ্ট্যগুলি একবার দেখে নিন এবং তারপরে আমরা যে ছবিটি দেখতে চাই তার অংশটি দেখানোর জন্য মার্জিনগুলি কীভাবে সেট করা হচ্ছে তা বোঝার জন্য ম্যাচিং সিএসএসের দিকে নজর দিন৷ 
 
 

 81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷ 

 গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।