HTML <img> టాగ్ యొక్క height మరియు width అంశాలు

హ్ట్మ్ఎల్ <img> టాగ్

ఉదాహరణ

చిత్రం వెడల్పు మరియు పొడవును వరుసగా 200 పిక్సెల్స్ గా అమర్చుట:

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

亲自试一试

నిర్వచనం మరియు వినియోగం

చిత్రం పరిమాణాన్ని అమర్చుట కొరకు <img> టాగ్ యొక్క height మరియు width అంశాలు.

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

提示：请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。

延伸阅读：height మరియు width అంశాల వివరణ

更多实例

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

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

హైట్ మరియు వైడ్త్ అటీరిబ్యూట్లను ఉపయోగించడం యొక్క మరొక కలాకారం ప్రకారం, పేజీ ప్రాంతాన్ని సులభంగా నింపవచ్చు, మరియు డాక్యుమెంట్ పనితీరును మెరుగుపరచవచ్చు. చూడండి, మీరు డాక్యుమెంట్లో ఒక రంగు కర్రను పెట్టడానికి కోరుకున్నారు. మీరు పూర్తి పరిమాణంలో ఉన్న చిత్రాన్ని సృష్టించకూడదు, ప్రత్యామ్నా, మీరు వైడ్త్ మరియు హైట్ అటీరిబ్యూట్లను ఉపయోగించి అది పెద్ద పరిమాణంలో విస్తరించవచ్చు.

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

పైన పేర్కొన్న హైల్ట్ యొక్క ప్రభావం ఈ విధంగా ఉంది, ఈ రంగు కర్రను ఒక పిక్సెల్స్ యొక్క చిత్రంతో తయారు చేయబడింది:

ప్రాంశుల విలువను ఉపయోగించడం

వైడ్త్ అటీరిబ్యూట్ యొక్క చివరి కలాకారం ప్రాంశుల విలువను ఉపయోగించడం ఉంది. ఇది బ్రౌజర్ చిత్రాన్ని బ్రౌజర్ విండో యొక్క పరిమాణంతో సమానంగా మారుస్తుంది. అందువల్ల, బ్రౌజర్ విండో యొక్క వైడ్త్ తో సమానంగా ఉండేటట్టు మరియు 30 పిక్సెల్స్ పొడవున్న రంగు కర్రను సృష్టించడానికి ఈ విధంగా చేయవచ్చు:

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

డాక్యుమెంట్ విండో యొక్క పరిమాణం మారితే, ఈ చిత్రం యొక్క పరిమాణం కూడా మారుతుంది:

提示：ఒక ప్రాంశుల రూపంలో వైడ్త్ విలువ అందించబడినప్పుడు, హైట్ విలువ తప్పిపోయినప్పుడు, చిన్నదిగా లేదా పెద్దదిగా చేయబడుతుంది అయినప్పటికీ, బ్రౌజర్ చిత్రం యొక్క వైడ్త్ హైట్ ప్రాపోర్షన్ ను పరిరక్షిస్తుంది. ఇది అర్థం చేస్తుంది చిత్రం యొక్క హైట్ మరియు వైడ్త్ నిష్పత్తి మారదు, చిత్రం కూడా చౌకాచౌకా కాదు.

请看下面的 HTML：

width="20%" />

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

提示：您可以在我们的在线测试工具中亲自试一试！

提示：我们提供以上例子的目的是为了使您更好地理解 height 和 width 属性的用法。如果您只是需要大面积的纯色块来装饰页面，那么更好的办法是使用 CSS 来创建背景色.

బ్రౌజర్ మద్దతు

అన్ని బ్రౌజర్లు height మరియు width అంశాలను మద్దతు ఇస్తాయి.

సంకేతం

<img height="value" />

లేదా:

<img width="value" />

అంశపు విలువ

విలువ వివరణ
pixels పిక్సెల్స్ ఇకానా పరిమాణాన్ని పరిగణించడం.
percent సంఘటిత కంటెయినర్ ప్రతిశతంలో ఉన్న పరిమాణాన్ని పరిగణించడం.

TIY ఉదాహరణ

చిత్రం పరిమాణాన్ని సరిచేయడం
ఈ ఉదాహరణలో చిత్రాన్ని వివిధ పరిమాణాలకు చేర్చడానికి మాత్రమే ఉపయోగించబడుతుంది.

height మరియు width అంశాల వివరణ

ఎందుకు height మరియు width అంశాలను ఉపయోగించాలి

మీరు డాక్యుమెంట్ లోకి లోడ్ అయ్యేటప్పుడు దాని ప్రదర్శన అసమానమైన చలనాలను చూసినారా. ఈ కారణం బ్రౌజర్ ప్రతి లోడ్ అయ్యే చిత్రాన్ని ప్రదర్శించడానికి ప్రయత్నిస్తున్నప్పుడు పేజీ సంరచనను తిరిగి సరిచేయడం కారణంగా ఉంది. బ్రౌజర్ చిత్రం వెడల్పు మరియు పొడవును డౌన్లోడ్ చేసి, గణించి చిత్రం పరిమాణాన్ని నిర్ణయిస్తుంది, అప్పుడు ప్రదర్శన విండోలో సరిపోయే కొలబడి నిర్మిస్తుంది. ఇది కూడా చిత్రం ఒక స్వతంత్ర ఫైల్ అని, దానిని స్రోత ఫైల్తో అలాగే స్వతంత్రంగా లోడ్ అవుతుంది అని మాట్లాడుతుంది.

కానీ ఇది డాక్యుమెంట్ ప్రదర్శనకు అత్యంత మంచి పద్ధతి కాదు, ఎందుకంటే బ్రౌజర్ సమీపంలోని మరియు తరువాతి డాక్యుమెంట్ ప్రదర్శనకు ముందు, ప్రతి చిత్ర ఫైల్ని తనిఖీ చేయడం మరియు వాటి స్క్రీన్ స్పేస్ ను గణించడం ఉంటుంది. ఇది డాక్యుమెంట్ ప్రదర్శనకు పెద్ద వ్యవధిని కలిగించవచ్చు, దానికి కారణం బాధించిన వారి పఠనం అంతరాయం జరుగుతుంది.

రచయితలకు ఒక చాలా మంచి పద్ధతి ఇంగ్లీష్ <img> టాగ్ యొక్క height మరియు width అంశాలను ఉపయోగించి చిత్రం పరిమాణాన్ని తీసుకోవడం. అలాగే, బ్రౌజర్ చిత్రాన్ని డౌన్లోడ్ చేయడానికి ముందు అది స్థానాన్ని కాల్పించి, దానికి కారణం డాక్యుమెంట్ ప్రదర్శన వేగంగా జరుగుతుంది, మరియు డాక్యుమెంట్ ప్రదర్శన నిర్వహణను నివారించగలదు. ఈ రెండు అంశాలు మొత్తం సంఖ్యలు అయివేసి, పిక్సెల్స్ ఇకానా అంచనా పరిమాణాన్ని ప్రతినిధీకరించగలవు. ఈ రెండు అంశాలు <img> టాగ్ లో కనిపించే క్రమం ముఖ్యం కాదు.

height 和 width 属性的问题

虽然 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧，但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。这时页面将看上去非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不用这些指定的尺寸，则浏览器将只是在文本中放置一个图像图标，这样显示中至少还有一些文字可以阅读。

ఈ ప్రశ్నకు మాకు పరిష్కారం లేదు, కాబట్టి మాకు ఒక సిఫారసు ఇవ్వాలి, అది ఉపయోగించండి alt అటీమెంట్మరియువివరణాత్మక పదాలుఇది వాచకులు కనీసం ఏమి లేదో తెలుసుకోవచ్చు. మనం ఈ సైజ్ అటీమెంట్లను ఉపయోగించడాన్ని సిఫారసు చేస్తున్నాము, ఎందుకంటే మామల్లో నెట్‌వర్క్ పరిమాణాన్ని మెరుగుపరచడానికి కారణమవుతుంది.

హ్ట్మ్ఎల్ <img> టాగ్