কম্পিউটার টিউটোরিয়াল

CSS দিয়ে রেসপন্সিভ ইমেজ তৈরি


উদাহরণ

নিচের কোডটি CSS ব্যবহার করে একটি রেসপন্সিভ ইমেজ তৈরি করার উদাহরণ:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img { width: 100%; max-width: 1000px; } </style> </head> <body> <h1>Responsive Images Example</h1> <h2>Resize the window to see responsive image scale up and down</h2> <img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"> </body> </html>

আউটপুট

উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:

CSS দিয়ে রেসপন্সিভ ইমেজ তৈরি

ব্রাউজার রিসাইজ করলে ইমেজ নিচের মতো স্কেল ডাউন হবে:

CSS দিয়ে রেসপন্সিভ ইমেজ তৈরি

  1. CSS দিয়ে রেসপন্সিভ ফ্লোটিং এলিমেন্ট তৈরি

  2. CSS দিয়ে অ্যারো (Arrow) তৈরি

  3. CSS দিয়ে রেসপন্সিভ টেস্টিমোনিয়াল (Testimonials) তৈরি

  4. CSS দিয়ে রিসপন্সিভ ব্লগ লে আউট (Responsive Blog Layout) তৈরি করা