HTML <img> width প্রতিশতাংশ

এইচটিএমএল <img> ট্যাগ

সংজ্ঞা ও ব্যবহার

width প্রতিশতাংশ ব্যবহার করুন।চিত্রের প্রসারিত মাপকে পিক্সেল ইউনিটে নির্দিষ্ট করুন。

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

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

延伸阅读：height এবং width এক্সিন্টিটির বিস্তারিত ব্যাখ্যা

实例

一张高 600 像素，宽 500 像素的图片：

Girl in a jacket

আপনাকে নিজেই চেষ্টা করুন

语法

属性值

值 描述
pixels 规定图像的宽度，以像素计（例如 width="100"）。

更多实例

改变图像大小 - 制作填充图像

height 和 width 属性有一种隐藏的特性，就是人们无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。但需要注意的是：浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。

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

width="200px" height="30px" />

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

শতকরা পক্ষকে ব্যবহার করা

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

width="60%" height="30px" />

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

তুলনা:যদি একটি শতকরা পক্ষের width মান প্রদান করা হয় এবং height-কে অবগত করা হয় না, তবে ব্যবহারকারীর অনুযায়ী বৃদ্ধি কিংবা কমানো হয়, ব্রাউজার চিত্রের পুর্ণাঙ্গতা রাখবে। এর মানে, চিত্রের প্রস্থ এবং পরিমাপের অনুপাত কমিয়ে যাবে না, ফলে চিত্রটি কোনভাবেই মুখস্থ হবে না。

দৃশ্যত এখানের HTML দেখুন:

width="20%" />

也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像（这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形）：


আপনাকে নিজেই চেষ্টা করুন

তুলনা:আমরা উপরোক্ত উদাহরণগুলি দিয়ে আপনাকে height এবং width এক্সিন্টিটির ব্যবহার সম্পর্কে বেশি ভালো বোঝাতে চাই। আপনি শুধুমাত্র একটি বিশাল একক রঙের ব্লক পৃষ্ঠাটিকে সাজাতে চান, তাহলে একটি আরও ভালো পদ্ধতি হলCSS ব্যবহার করে পটভূমির রঙ তৈরি করা.

height এবং width এক্সিন্টিটির বিস্তারিত ব্যাখ্যা

কেন height এবং width এক্সিন্টিটি ব্যবহার করা হয়

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

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

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

height এবং width এক্সিন্টিটির সমস্যা

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

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

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

চ্রোম এডজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এডজ ফায়ারফক্স স্যাফারি অপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন

এইচটিএমএল <img> ট্যাগ