CSS object-fit এবং object-position প্রোপার্টি আমাদের ইমেজ ক্রপ করতে এবং কীভাবে একটি এলিমেন্টে প্রদর্শিত হবে তা নির্দিষ্ট করতে সাহায্য করে।
CSS object-fit প্রোপার্টির সিনট্যাক্স নিচের মতো −
Selector { object-fit: /*value*/ object-position:/*value*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS object-fit প্রোপার্টি প্রদর্শন করে।
<!DOCTYPE html> <html> <head> <style> img { object-fit: cover; } img:last-of-type { object-fit: contain; } </style> </head> <body> cover <img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/> <img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/> contain </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
উদাহরণ
<!DOCTYPE html> <html> <style> div { border: 1px solid blue; width:100%; height:300px; } img { float:left; width:50%; height:100%; object-fit:cover; object-position: 20px -10px; } </style> <body> <div > <img src="https://images.unsplash.com/photo-1611800065908- 233b597db552?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250" /> <img src="https://images.unsplash.com/photo-1612626256634- 991e6e977fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250"/> </div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
রিসাইজ করার প্রভাব
