CSS width প্রোপার্টি দিয়ে রেসপন্সিভ ইমেজ তৈরি করুন

width: 100% সেট করে ইমেজকে রেসপন্সিভ করা হয়। তবে এটি ইমেজকে তার মূল আকার থেকে বড় হতে দেয়, যা গুণমান হ্রাস করতে পারে। max-width: 100% আরও নিরাপদ।

উদাহরণ

নিচের কোডটি চালিয়ে width প্রোপার্টি দিয়ে রেসপন্সিভ ইমেজের উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
      img { 
        width: 100%; 
        height: auto; 
      } 
    </style> 
  </head> 
  <body> 
    <p>To check the effect, you need to resize the browser.</p> 
    <img src="https://www.tutorialspoint.com/python/images/python-data-science.jpg" alt="Python Data Science" width="400" height="300"> 
  </body> 
</html>

ব্যাখ্যা: width: 100% ইমেজকে সবসময় প্যারেন্ট কন্টেইনারের পুরো প্রস্থে ফেলায়। যদি কন্টেইনার ইমেজের মূল প্রস্থের চেয়ে বড় হয়, তবে ইমেজ তানের আকারে বড় হবে এবং ফটো ব্লারি বা পিক্সেলেটেড দেখাবে। এই কারণেই max-width: 100% পছন্দ করা হয়।