HTML-এ ইমেজের প্রস্থ

ডিফল্টভাবে, ইমেজগুলি তাদের প্রকৃত আকারে প্রদর্শিত হয়। উদাহরণস্বরূপ, আমরা উপরে যে স্মাইল ইমেজটি দেখিয়েছি সেটির প্রকৃত আকার হল 130 বাই 130 পিক্সেল এবং ব্রাউজারে আমরা ইমেজটির ঠিক সেই আকারই দেখি।

ইচ্ছে করলে, ইমেজের প্রস্থ নির্ধারণ করে এর আকার পরিবর্তন করা যায়। এটি width অ্যাট্রিবিউট ব্যবহার করে করা হয়।

উদাহরণ হিসেবে, আমাদের ইমেজটির প্রস্থ 100 পিক্সেল সেট করি। এটি করতে, width অ্যাট্রিবিউটের মান হিসেবে 100 সংখ্যাটি নির্দেশ করব, এভাবে:

htmlwidth="100"

স্ক্রিনে ইমেজটির আকার কত হবে? কেউ ভাবতে পারে যে এটি হবে নিম্নরূপ: প্রস্থ 100 পিক্সেল, যেমন আমরা নির্ধারণ করেছি, এবং প্রকৃত উচ্চতা 130, কারণ আমরা সেটি নির্ধারণ করিনি।但实际上, এটা এমন হবে না।

প্রস্থ সত্যিই 100 পিক্সেল হবে, কিন্তু উচ্চতা নিজেকে এমনভাবে সামঞ্জস্য করবে যাতে ইমেজের অনুপাত বিকৃত না হয়, অর্থাৎ সেটিও 100 পিক্সেল হয়ে যাবে।

চলুন রান করে এটা নিশ্চিত করি:

html<img src="smile.png" width="100">

Результат: