CSS-এ ইমেজ ক্রপ করার বেশ কিছু পদ্ধতি আছে, তবে সবচেয়ে সহজ এবং কার্যকর তিনটি পদ্ধতি নিচে দেওয়া হলো:
১. object-fit ব্যবহার করা
object-fit: cover ব্যবহার করে ইমেজ ক্রপ করা যায় এবং এस्पেক্ট রেশিও বজায় থাকে। object-position এর সাথে মিলিয়ে ইমেজের কোন অংশ দেখাবে তা নিয়ন্ত্রণ করা যায়।
img {
object-fit: none;
object-position: 50% 50%; /* সেন্টারে রাখা */
}
২. background-image ব্যবহার করা
<div>-এ background-image সেট করে এবং background-size: cover ব্যবহার করে ক্রপ করা যায়।
div {
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
সীমাবদ্ধতা: স্ক্রিন রিডার ব্যাকগ্রাউন্ড ইমেজ পড়ে না, তাই অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ ইমেজের জন্য এই পদ্ধতি এড়িয়ে যাওয়া ভালো।
৩. Width, Height, Margin এবং Overflow ব্যবহার করা
কন্টেইনারের (সাধারণত <div>) position: relative এবং overflow: hidden সেট করুন। তারপর ইমেজের margin ঋণাত্মক মান দিয়ে ইমেজের sichtbaar অংশ নিয়ন্ত্রণ করুন।
.container {
position: relative;
overflow: hidden;
width: 300px;
height: 200px;
}
.container img {
width: 100%;
margin: -20% auto 0; /* উপরের ২০% ক্রপ */
}
বিভিন্ন ক্রপ উদাহরণ
- crop-top: margin-top ঋণাত্মক
- crop-bottom: margin-bottom ঋণাত্মক
- crop-right: width 120%, margin-right ঋণাত্মক
- crop-left: width 120%, margin-left ঋণাত্মক
- crop-square: object-fit: cover দিয়ে বর্গাকার ক্রপ
উপসংহার
object-fit: cover সবচেয়ে আধুনিক এবং সহজ পদ্ধতি। background-image অ্যাক্সেসিবিলিটির কারণে সীমিত ব্যবহার। Width/height/margin/overflow পুরানো পদ্ধতি কিন্তু পুরানো ব্রাউজার সাপোর্টের জন্য কার্যকর।
