📜  如何在HTML中更改图像大小

📅  最后修改于: 2020-11-04 01:03:07             🧑  作者: Mango

如何在HTML中更改图像大小

在HTML中,我们可以使用以下不同方式更改任何图像的大小:

  • 使用HTML标签
  • 使用内联样式属性
  • 使用内部CSS

使用HTML标签

注意:HTML 5不支持的height和width属性,因此我们必须使用内联样式属性和内部CSS选项来更改图像或图片的大小。

如果要使用要在网页上显示的Html标记更改文档中图像的大小,则必须遵循以下步骤。使用以下步骤,我们可以轻松更改图像大小:

步骤1:首先,我们必须在任何文本编辑器中键入Html代码,或者在要更改图像大小的文本编辑器中打开现有的Html文件。


   
    
   
Chnage the Size of an image


 
Hello User! 
You are at

步骤2:现在,将光标放在img标签内。然后,我们必须使用img标签的height和width属性来更改图像的大小。因此,我们必须输入以下属性:


步骤3:最后,我们必须保存HTML文件,然后运行它。


   
    
   
Chnage the Size of an image


 
Hello User! 
You are at

下面的屏幕快照显示了上述HTML代码的输出:

使用内联样式属性

如果要使用将在网页上显示的内联样式属性更改图像的大小,则必须遵循以下步骤。使用这些步骤,我们可以轻松更改图片大小。

步骤1:首先,我们必须在任何文本编辑器中键入HTML代码或在文本编辑器中打开要使用style属性更改图像大小的现有HTML文件。


   
    
   
Change the Size of an image using inline style attribute


 
Hello User! 
You are at

步骤2:现在,将光标放置在我们要更改其大小的图像的img标签内。然后,我们必须在src属性之后键入style属性。然后,我们必须在style属性中键入width和height属性,如以下块所示:

 

步骤3:最后,我们必须保存HTML文件,然后运行它。


   
    
   
Change the Size of an image using inline style attribute


 
Hello User! 
You are at

下面的屏幕快照显示了以上HTML代码的输出:

使用内部CSS

如果要使用要在网页上显示的内部级联样式表来更改图像或图片的大小,则必须遵循以下步骤。使用这些步骤,我们可以轻松更改任何图像的大小。

步骤1:首先,我们必须在任何文本编辑器中键入Html代码,或在文本编辑器中打开要使用内部CSS更改图像大小的现有Html文件。


   
    
   
Change the Size of an image using internal CSS


 
Hello User! 
This is

第2步:现在,我们必须将光标放在Html文档的head标签中,然后在

步骤3:现在,我们必须在要更改尺寸的图像的img标签中键入id:


   
    
   
Change the Size of an image using internal CSS



 
Hello User! 
This is

步骤5:现在,我们必须保存HTML文件,然后运行该文件。以下屏幕截图显示了上述HTML代码的输出: