ສັນຍາ <img> height ແລະ width ຂອງ HTML

HTML <img> ອອກມາຈາກສັນຕິພາບ

ຄວາມນຳພາຍໃນ

ຕັດສິນຄວາມກວ້າງ ແລະ ຄວາມວຸດທີ່ 200 ພັນຈອນ:

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

亲自试一试

ການກໍານົດ ແລະ ການນໍາໃຊ້

ສັນຍາກັບ height ແລະ width ຂອງ <img> ຕັດສິນສະແດງຂະໜາດພາບສະແດງ.

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

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

延伸阅读：ອະທິບາຍ height ແລະ width

更多实例

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

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

ຄຳສັບພາສາ

<img height="value" />

ຫຼື:

<img width="value" />

ຄູ່ມາຂອງບັນດາຄວາມ

ຈຳນວນ ອະທິບາຍ
pixels ຈຳນວນຂອງສະເພາະທີ່ຈະບັນທຶກທັງສອງປະກອບ: ຈຳນວນພາບຈຸດ.
percent ຈຳນວນຂອງສະເພາະທີ່ຈະບັນທຶກທັງສອງປະກອບ: ສະແດງທຳມະດາຈາກສິ່ງທີ່ຈະມີຄວາມພາບຄຸມຫຼາຍຂື້ນ.

TIY ຄວາມຄິດ

ການດາວພາບ
ຕົວຢ່າງທີ່ສະແດງວ່າການດາວພາບທີ່ຈະດາວຢູ່ພາຍໃນຄວາມສະເພາະທີ່ຫຼາຍຫຼາຍ.

ອະທິບາຍ height ແລະ width

ພະຍາດການໃຊ້ height ແລະ width

ທ່ານໄດ້ເຫັນຫຼັງຈາກການດາວເອກະສານທີ່ຂໍ້ມູນຈະປ່ຽນທຳມະດາ. ການປ່ຽນທຳມະດານັ້ນຈະເກີດຍ້ອນວ່າບຣຸເວີເຊີ້ຈະຕ້ອງກວດກາແລະຄວາມສະເພາະຂອງພາບທີ່ຈະດາວຢູ່ພາຍໃນເບຍທີ່ຈະດາວພາບດັ່ງນັ້ນ. ບຣຸເວີເຊີ້ຈະດາວຂອບເຂດຂອງພາບໃນເບຍທີ່ຈະດາວພາບດັ່ງນັ້ນ. ດັ່ງນັ້ນຈະເຮັດໃຫ້ບຣຸເວີເຊີ້ຕ້ອງປ່ຽນການຈັດວາງພາບທີ່ຈະດາວພາບດັ່ງນັ້ນ. ດັ່ງນັ້ນນັ້ນຍັງເປັນຫຍັງພາບແມ່ນບັນດາບັນທຶກທີ່ອາດບັນທຶກທັງຫຼາຍກັນແລະບັນທຶກທັງອາດບັນທຶກຫຼາຍກັນ.

ວ່ານັ້ນບໍ່ແມ່ນວິທີທີ່ມີປະສິດທິພາບຫຼາຍທີ່ສຸດທີ່ສຳລັບການສະແດງເອກະສານຍ້ອນວ່າບຣຸເວີເຊີ້ຈະຕ້ອງກວດກາແລະສາຍວິທີພາບທີ່ກ່ວານັ້ນແລະຈະຄວາມສະໜາມຕະຫຼາດທີ່ສະແດງພາບ. ດັ່ງນັ້ນຈະເຮັດໃຫ້ພາບສະແດງດ້ວຍຄວາມຫຼາຍທີ່ຈະສົ່ງຄວາມລ່ວງກວ່າຄວາມອ່ອນຂອງຜູ້ອ່ານ.

ສຳລັບນັກສ້າງເພງຄວາມມີຢູ່ການໃຊ້ບາງວິທີທີ່ມີປະສິດທິພາບຫຼາຍຂື້ນຈາກການກຳນົດຂອບເຂດຂອງພາບຈາກປະເພດ <img> height ແລະ width. ດັ່ງນັ້ນໃນການດາວນານພາບກໍ່ຈະມີສະຖານທີ່ທີ່ຄິດວ່າຈະຕັ້ງຢູ່ກ່ອນການດາວນານພາບດັ່ງນັ້ນຈະເຮັດໃຫ້ພາບສະແດງດ້ວຍຄວາມໄວຫຼາຍກວ່າແລະຈະຫຼີກລ່ວງການຄືນກາງຂອງຂໍ້ມູນຂອງເອກະສານ. ອາການທັງສອງການສະແດງກໍ່ຕ້ອງເປັນຈຳນວນທີ່ສະເພາະແລະຈະບັນທຶກວ່າພາບຈະຖືກສະແດງວ່າຄວາມສະເພາະ. ການອອກອາກາດຂອງການສະແດງກໍ່ບໍ່ມີຄວາມສຳຄັນ.

height 和 width 属性的问题

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

ສຳລັບບັນຫານີ້ພວກເຮົາຍັງບໍ່ມີການກຳນົດ, ພຽງແຕ່ພວກເຮົາສະແດງຫຼັກສູດວ່າ, ເພື່ອນຳໃຊ້ ປະເພດ altແລະຂໍ້ຄວາມອະທິບາຍດັ່ງນັ້ນຜູ້ອ່ານຢ່າງໜ້ອຍກໍ່ຈະຮູ້ວ່າບາງຢ່າງຫາຍສາຍ. ພວກເຮົາຍັງແນະນຳໃຫ້ພວກເຮົານຳໃຊ້ບັນດາລັກສະນະຂັ້ນວັດຖຸນີ້ຍ້ອນພວກເຮົາສະໜັບສະໜູນການປັບປຸງການປະຕິບັດການທາງທາງອິນເຕີເນັດ.

HTML <img> ອອກມາຈາກສັນຕິພາບ