📌  相关文章
📜  如何在 HTML 页面中使用图像高度和宽度属性?

📅  最后修改于: 2022-05-13 01:56:52.730000             🧑  作者: Mango

如何在 HTML 页面中使用图像高度和宽度属性?

HTML代表超文本标记语言。超文本定义了在线页面之间的链接。它用于定义标签内定义网站结构的文本文档。这种语言用于对文本进行注释,以便机器可以了解它并相应地操作文本。大多数标记语言(例如 HTML)是人类可读的。该语言使用标签来定义必须对文本进行的操作。

要在 HTML 页面中添加图像,请使用 标签。有了这个,我们需要使用图像的属性的宽度和高度(以像素为单位)。指定这两个属性。

句法:

some_text

属性:

  • src: src代表源。每个图像都有一个src属性,它告诉浏览器在哪里可以找到要显示的图像。提供的图像的 URL 指向图像的存储位置。
  • alt:如果图像无法显示,则alt属性充当图像的替代描述。 alt属性的值是用户定义的文本。

设置图像的宽度和高度:宽度高度属性用于指定图像的宽度和高度。默认情况下,属性值以像素为单位指定。

句法:

some_text

笔记:

  • px:像素 -像素(1px = 1in 的 1/96)
  • in:英寸 -英寸(1in = 96px = 2.54cm)
  • pt:点 -点(1pt = 1/72 of 1in)

示例 1:一个高度为 600 像素,宽度为 500 像素的图像。 width属性指定图片的宽度,以磅为单位。

HTML


  

    

Welcome To GFG

      

Image with width and height in points

          


HTML


  

    

Welcome To GFG

    

img tag with width and height attribute

       


HTML


  

    
        Setting width and height 
        attribute of image
    

  

    

          Image is inserted using width and          height attribute in pixels.     

                    

Height of this image is 250 pixels

         

Width of this image is 250 pixels

       

        Image is inserted using width and          height attribute in points.     

               

Height of this image is 50 points

    

Width of this image is 35 points

  


输出:

示例 2:另一个示例显示宽度和高度属性的使用。我们提到宽度为 450 像素,高度为 220 像素。

HTML



  

    

Welcome To GFG

    

img tag with width and height attribute

       

输出:

示例 3:另一个 HTML 程序显示使用具有宽度高度属性的 标记。在这段代码中,我们将高度宽度的值设为 250 像素。

HTML



  

    
        Setting width and height 
        attribute of image
    

  

    

          Image is inserted using width and          height attribute in pixels.     

                    

Height of this image is 250 pixels

         

Width of this image is 250 pixels

       

        Image is inserted using width and          height attribute in points.     

               

Height of this image is 50 points

    

Width of this image is 35 points

  

输出: