HTML img ট্যাগের height এবং width প্রতিশব্দ

HTML <img> ট্যাগ

উদাহরণ

চিত্রের প্রস্থ এবং উচ্চতা 200 পিক্সেল হিসাবে নির্ধারণ করুন:

img src="/i/mouse.jpg" height="200" width="200" />

আপনাকে স্বয়ং প্রয়াস করুন

বিন্যাস এবং ব্যবহার

img ট্যাগের height এবং width প্রতিশব্দ চিত্রের মাপ নির্ধারণ করে。

!为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。

!ছবিকে height এবং width অপেশনগুলির মাধ্যমে সময়বদ্ধ করতে হবে না।যদি height এবং width অপেশনগুলির মাধ্যমে ছবিটিকে ছোট করা হয়, তবে ব্যবহারকারীকে বড় আকারের ছবি ডাউনলোড করতে হবে (যদিও ছবিটি পৃষ্ঠায় ক্ষুদ্র দেখানো হয়)।সঠিক পদ্ধতি হল, একটি ছবিকে পৃষ্ঠায় ব্যবহার করা আগে, সফটওয়্যারের মাধ্যমে ছবিটিকে যথাযথ মাপে প্রক্রিয়াকরণ করা।

আরও পড়ার জন্য:height এবং width প্রতিশতির বিস্তারিত ব্যাখ্যা

আরও প্রকল্প

ছবির মাপ পরিবর্তন - ভরবিত ছবি তৈরি

height এবং width অপেশনগুলির একটি লুকিয়ে থাকা বৈশিষ্ট্য হল, যেখানে লোকজন ছবির আকার নির্দিষ্ট করতে হবে না, অর্থাৎ, এই দুটি মানগুলি অসল মাপের থেকে বড় কিংবা ছোট হতে পারে। ব্রাউজার স্বয়ংক্রিয়ভাবে ছবিটিকে সময়বদ্ধ করবে, যাতে তা সময়বদ্ধ করা জায়গার মাপের অনুপাতে মান রাখতে পারে। এই পদ্ধতিতে, বড় ছবিগুলির থম্বনামা এবং অত্যন্ত ছোট ছবিগুলির প্রদর্শন করতে খুব সহজভাবে কাজ করা যাবে, কিন্তু লক্ষ্য করা উচিত যে, ব্রাউজারও সম্পূর্ণ ফাইলটি ডাউনলোড করবে, যেমন তা কোনো ধরণের প্রদর্শন মাপের অনুপাতে পরিবর্তন করা হয় না, এবং যদি অসল প্রতিপালনার অনুপাত রাখা হয় না, তবে ছবিটি কোনো ধরণের ক্রমবর্ধমান হবে。

height এবং width অপেশনগুলির একটি অন্যান্য টিকা হল, যা সহজেই পৃষ্ঠার একটি অঞ্চলকে ভরবিত করতে সাহায্য করে, এবং এটি ডকুমেন্টের কার্যকারিতা উন্নত করতেও সাহায্য করে। যদি আপনি ডকুমেন্টে একটি রঙবর্ণ হরণ স্থাপন করতে চান, তবে আপনাকে একটি সম্পূর্ণ মাপের ছবি তৈরি করতে হবে না, বরং একটি পিক্সেল প্রস্থতা এবং ১টি পিক্সেল উচ্চতার ছবি তৈরি করে, এবং এই রঙকে এটিতে অন্তর্ভুক্ত করে, এবং height এবং width অপেশনগুলি দিয়ে এটিকে বড় করে ফেলুন。

<img src="/i/ct_1px.gif" width="200px" height="30px" />

এই উপরোক্ত HTML-এর প্রভাব, এই রঙবর্ণ হরণটি একটি পিক্সেলের ছবি দিয়ে তৈরি করা হয়েছে:

পারসেন্টের মান ব্যবহার করা

width অপেশনের শেষ টিকা হল, পিক্সেলের অবিচ্ছিন্ন মানের পরিবর্তে পারসেন্টের মান ব্যবহার করা। এর ফলে, ব্রাউজার ছবিটিকে ব্রাউজার প্রদর্শন উইন্ডোর একটি নির্দিষ্ট অনুপাতে সময়বদ্ধ করবে। তাই, যদি আপনি একটি প্রদর্শন উইন্ডোর সমসমান প্রস্থতা এবং ৩০টি পিক্সেল উচ্চতার রঙবর্ণ হরণ তৈরি করতে চান, তবে এভাবে করতে পারেন:

<img src="/i/ct_1px.gif" width="60%" height="30px" />

যখন ডকুমেন্ট উইন্ডোর মাপ পরিবর্তন করা হয়, এই ছবির মাপও পরিবর্তন করা হবে:

!যদি একটি পারসেন্টের রূপান্তরের width মান প্রদান করা হয় এবং height-কে অবহেলা করা হয়, তবে কোনো ধরণের মাপের উপর নির্ভর করে ছবিটি বড় করা হয় বা ছোট করা হয়, ব্রাউজার ছবির প্রতিপালনার অনুপাত রাখবে। এর মানে, ছবির প্রতিপালনার অনুপাত কোনো ধরণের পরিবর্তন করা হবে না, এবং ছবিটি কোনো ধরণের ক্রমবর্ধমান হবে না。

দেখুন নিচের HTML:

<img src="/i/ct_1px.gif" width="20%" />

যদি শুধুমাত্র একটি বিশাল পুরো রঙবর্ণ ব্লককে পৃষ্ঠা দেখাতে হয়, তবে একটি ভালো পদ্ধতি

!আপনি আমাদের অনলাইন টেস্টিং টুলেআপনাকে স্বয়ং প্রয়াস করুন!

!টীকা:পিছনের রঙ তৈরি করার জন্য CSS ব্যবহার করুন。

ব্রাউজার সমর্থন

সকল ব্রাউজারগুলিতে height এবং width প্রতিশতি সমর্থিত

ব্যাক্যান্তি

<img height="value" />

অথবা:

<img width="value" />

প্রতিশতির মান

মান বর্ণনা
pixels পিক্সেলের পদক্ষেপে উচ্চতা এবং প্রস্থ মাপ
percent উপাদানের প্রতিশত অনুযায়ী উচ্চতা এবং প্রস্থ মাপ

TIY ইন্সট্রাকশন

চিত্রের মাপ পরিবর্তন
এই উদাহরণটি দেখে চিত্রটিকে বিভিন্ন মাপে পরিবর্তন করার পদ্ধতিকে বোঝা যাবে。

height এবং width প্রতিশতির বিস্তারিত ব্যাখ্যা

কেন height এবং width প্রতিশতি ব্যবহার করা হয়?

আপনি কখনও দেখেছেন যে, ডকুমেন্ট লোড হওয়ার সময় তার মূল বিষয়টি অস্থিরভাবে প্রদর্শিত হয়। এইভাবে, ব্রাউজারটি প্রত্যেকটি লোড হওয়া চিত্রটি প্রদর্শন করার জন্য, পৃষ্ঠার সাজসজ্জাটি পুনরায় নির্ধারণ করে। ব্রাউজারটি চিত্রের প্রস্থ এবং উচ্চতা ডাউনলোড করে এবং পরে প্রদর্শন পর্দায় একটি প্রয়োজনীয় বর্গাকার জায়গা তৈরি করে। এরপর, ব্রাউজারটি পৃষ্ঠার সাজসজ্জাটি পুনরায় নির্ধারণ করে, যাতে চিত্রটি প্রদর্শিত হতে পারে। এটা আমাদেরকে বোঝায় যে, চিত্রগুলি পৃথক ফাইল, যা সূত্র ফাইল থেকে পৃথকভাবে লোড করা হয়।

কিন্তু এটা ডকুমেন্টটির প্রদর্শনের ক্ষেত্রে সর্বোত্তম পদ্ধতি নয়, কারণ ব্রাউজারটি সংলগ্ন এবং পরবর্তী ডকুমেন্টের মূল বিষয়টি প্রদর্শন করা আগেই প্রত্যেকটি চিত্র ফাইলটি চেক করতে হয় এবং তাদের স্ক্রিন স্পেস নির্ধারণ করতে হয়। এটা ডকুমেন্টের প্রদর্শনকে অনেকটা দেরীতে পাড়ি দিতে পারে, যার ফলে ব্যবহারকারীর পাঠকের কার্যকাল বিঘ্নিত হয়।

সৃষ্টিকারীদের জন্য, <img> ট্যাগের height এবং width প্রতিশতির মাধ্যমে চিত্রের মাপ নির্ধারণ একটি বেশি কার্যকরী পদ্ধতি। এইভাবে, ব্রাউজার চিত্রটি ডাউনলোড করা আগেই তার জায়গা দিয়েছে, যার ফলে ডকুমেন্টটির প্রদর্শন গতিবর্ধিত হয়, এবং ডকুমেন্টের মূল বিষয়টির গতিবিধি বিঘ্নিত হয়। এই দুটি প্রতিশতি সম্পূর্ণ সংখ্যা হয়ে থাকবে এবং পিক্সেলের পদক্ষেপে চিত্রের মাপ নির্ধারণ করবে। এই দুটি প্রতিশতি <img> ট্যাগের ক্রমানুসারে নির্ধারিত হবে না。

height এবং width অ্যাট্রিবিউটের সমস্যা

যদিও <img> ট্যাগের height এবং width অ্যাট্রিবিউটগুলি কার্যকারিতা উন্নত করতে এবং আপনাকে কিছু ছোট ট্রিকস ব্যবহার করতে সহায়তা করতে পারে, কিন্তু এগুলি ব্যবহার করার সময় কিছু খুব বাধাদায়ক নেতিবাচক প্রভাবও থাকে।যদিও ব্যবহারকারীগণ অটোমেটিক অ্যালবাম ডাউনলোড ফিল্টার বন্ধ করেছেন, ব্রাউজারও অ্যালবামটিকে সংজ্ঞিত মাপে দেখাবে।এইভাবে পাঠককে সাধারণত একটি খালি ফ্রেম দেখাবে, যাতে একটি কোনও মানসিক চিহ্ন থাকবে, যার মাধ্যমে এটি ছবির স্থান নির্দেশ করা হয়েছে।এই সময় পাতা খুব খারাপ দেখাবে, যেমন কোনও কাজ সম্পূর্ণভাবে করা হয়নি, এবং বেশিরভাগ কনটেন্ট কোনও প্রয়োজন নয়।যদি এই নির্দিষ্ট মাপ ব্যবহার না করা হয়, তবে ব্রাউজারও শুধুমাত্র লেখায় একটি ছবি আইকন প্রদর্শন করবে, যাতে পাঠককে কমপক্ষে কোনও লেখা পড়ার সুযোগ থাকবে。

এই প্রশ্নের জন্য আমরা এখনও কোনও সমাধান পাচ্ছি না, কিন্তু একটি বিষয় দৃঢ়ভাবে জানাবো যে, আপনাকে alt অ্যাট্রিবিউটএবংবর্ণনামূলক লেখাএইভাবে পাঠক কমপক্ষে জানতে পারবে যে এখানে কি অভাব আছে।আমরা এই মাপ প্রতিশতি ব্যবহার করার জন্য সুপারিশ করি, কারণ আমরা নেটওয়ার্ক কার্যকারিতা উন্নত করার কোনও কিছুকে উৎসাহিত করছি。

HTML <img> ট্যাগ