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

max-width: 100% ব্যবহার করে ইমেজকে রেসপন্সিভ করা হয়। এটি নিশ্চিত করে যে ইমেজ তার মূল আকার থেকে বড় হবে না, কিন্তু ছোট কন্টেইনারে ফিট होने ছোট হবে।

উদাহরণ

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

<!DOCTYPE html> <html> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
      img { 
        max-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>

ব্যাখ্যা: max-width: 100% ইমেজকে তার প্যারেন্ট কন্টেইনারের চেয়ে বড় হওয়া থেকে রোধ করে। height: auto অ্যাসপেক্ট রেশিও রক্ষা করে। width: 100% ব্যবহার করলে ছোট ইমেজও বড় হয়ে পিক্সেলেট হতে পারে, যা max-width এড়ায়।