HTML <img> height প্রকৃতি

এইমডুলকে আপনার প্রোজেক্টে পরিবর্তনকরতে, কোডটিকে সংযোজিত করুন এবং পরবর্তীকালে কম্পাইল করুন。

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

height প্রকৃতি নির্দিষ্ট করে ছবির উচ্চতা পিক্সেলে ইউনিটে।

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

টিপস:ব্যবহার করুন height এবং width 属性缩小大型图像会强制用户下载大型图像（即使在页面上看起来很小）。为避免这种情况，在将图像用于页面之前，请使用图像处理软件重新调整其尺寸。

延伸阅读：height এবং width এক্সিন্টির বিবরণ

实例

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

Girl in a jacket

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

语法

属性值

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

更多实例

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

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

使用 height 和 width 属性的另外一种技巧，是可以非常容易地实现对页面区域的填充，同时还可以改善文档的性能。设想一下，如果你想在文档中放置一个彩色的横条。您不需要创建一个具有完整尺寸的图像，相反，您只要创建一个宽度和高度都为 1 个像素的图像，并把自己希望使用的颜色赋给它。然后使用 height 和 width 属性把它扩展到更大的尺寸。

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

这是上面这段 HTML 的效果，这个颜色彩条是用只有一个像素的图像制成的：

使用百分比值

使用 width 属性的最后一个技巧是使用百分比值来代替像素的绝对值。这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像。因此，如果要创建一个宽度与显示窗口宽度相同，高度为 30 个像素的彩色横条，可以这样实现：

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 প্রতিযোগী এবংবর্ণনামূলক লেখাএভাবে, পাঠক কমপক্ষে এখানে কি অভাব আছে তা জানতে পারবে।আমরা এই মাপকাঠিতে এই সাইটের কাজকর্মকে উন্নত করার উপযোগী হবে বলে সুপারিশ করি, কারণ আমরা যে কোনও কাজকর্মকে উন্নত করার উপযোগী হওয়ার পক্ষে সমর্থন করি

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

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

এইমডুলকে আপনার প্রোজেক্টে পরিবর্তনকরতে, কোডটিকে সংযোজিত করুন এবং পরবর্তীকালে কম্পাইল করুন。