图像构成了网络的很大一部分 - 大多数网站都包含图像。HTML使您可以非常轻松地将图像嵌入到网页中。
若要将图像嵌入到网页中，该图像首先需要以.jpg、.gif或.png格式存在。您可以在图像编辑器（如 Adobe 照片店、GIMP、Adobe 插画师等）中创建图像，并以正确的格式保存它们。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
创建图像后，需要将其嵌入到网页中。若要将图像嵌入到网页中，请使用 <img> 标记，指定图像的实际位置。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
这意味着对于实时网站，任何图像都需要上传到网络，就像HTML文件一样。大多数网站都有一个单独的图像文件目录，称为或类似。images文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
图像使用示例
<img src="/pix/samples/18m.jpg" width="166" height="101" alt="Photo of three cats">
此示例在图像位置的开头使用正斜杠。这指定映像的路径从当前域开始。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
因此，如果它位于域中，则映像位置将解析为 。https://www.sinasz.cn/wp-content/uploads/2022/09/smile.gif文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
上面的 <img> 元素包含许多属性。这些属性告诉浏览器有关图像以及如何显示图像的所有信息。以下是这些属性的说明：文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
src | 必需属性。这是图像的路径。它可以是绝对路径，也可以是相对路径（还记得我们上一课中的这些术语吗？ |
width | 可选属性。这指定显示图像的宽度。如果实际图像较宽，它将缩小到您在此处指定的尺寸。同样，如果实际图像较小，它将扩展到您的尺寸。 |
height | 可选属性。这指定显示图像的高度。此属性的工作方式与宽度类似。 |
alt | 替代文本。这指定在浏览器/用户代理无法呈现图像时要使用的文本。 |
使用 CSS 的维度
您可以选择使用 CSS 设置大小，而不是像上面那样使用 和 维度。这可以为您提供额外的灵活性。widthheight文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
例如，有时指定最大宽度或最大高度而不是绝对大小会很有用。这可以防止大图像破坏您的布局（例如，如果它太大而无法放入内容区域）。特别是当有人试图在具有小屏幕的设备（例如手机）上查看您的网站时，可能会发生这种情况。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
在下面的示例中，我们使用 来确保图像对于其上下文来说永远不会太大。当您仅使用（不使用）时，浏览器将按比例重新缩放图像。换句话说，高度将随着宽度一起重新缩放，并且图像不会被压扁。执行此操作时，请确保删除 HTML 和属性，否则它们将与 CSS 冲突。max-width:100%max-widthmax-heightwidthheight文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
单击该按钮以在编辑器中比较此示例和上面的示例。如果您的屏幕足够大，则图像应以不同的尺寸显示。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
<img src="/pix/samples/18m.jpg" style="max-width:100%" alt="Photo of three cats">
图片链接
您可以使图像“可点击”，以便当用户单击图像时，它会打开另一个URL。为此，只需使用超链接代码包装图像即可。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
<a href="https://en.wikipedia.org/wiki/Boracay"> <img src="/pix/samples/14s.jpg" style="max-width:100%;" alt="Boracay, Philippines"> </a>
创建映像
上面的示例假设您已经有一个要嵌入到网页中的图像。若要了解如何为 Web 创建图像，请查看 Web 图形教程。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html 文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/42.html
评论