html img 标签，属性比例不变修改大小

最新推荐文章于 2024-04-10 17:21:13 发布

王建博09

最新推荐文章于 2024-04-10 17:21:13 发布

阅读量3.1k

点赞数 1

文章标签： html

本文链接：https://blog.youkuaiyun.com/wangjianbo09/article/details/124495290

版权

本文详细介绍了HTML中<img>标签的使用，包括src属性指定图片路径，alt属性提供图片加载失败时的替代文本，title属性设置鼠标悬停时的提示信息，以及width和height属性用于设定图片尺寸。通过实例展示了当只设置width属性时，图片会保持比例缩放。内容适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

img 标签，首先明确img是单标签不是成对出现的即 <img> 即可。

src 属性就是图片的地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img标签</title>
</head>
<body>
    <img src="./data/12.png" >
</body>
</html>

下图是我文件的相对位置

显示效果

alt 属性文本代替内容，当图片无法加载时显示

代码修改如下，请注意我把图片名称修改了，以确保图片加载失败。

   <img src="./data/a12.png" alt="图片加载失败是我出现">

显示效果：

title 标题属性鼠标停留是显示的提示问题内容

代码修改后如如下：

<img src="./data/12.png" alt="图片加载失败是我出现" title="鼠标悬停是我出现">

显示效果如下图：

width和height 属性宽高属性，这是这次学习的重点，记住一句话，如果只设置宽和高其中一个属性，则另一个属性按比例变化，也就是为了使图片不变形可以只设置一个参数。

代码修改如下：设置了width = 150

<img src="./data/12.png" alt="图片加载失败是我出现" title="鼠标悬停是我出现" width="150">

显示效果：图片的高度也发生了变化，而且图片比例没有发生变化。

html img 标签，属性 比例不变修改大小

html img 标签，属性比例不变修改大小