HTML 图像

简介

HTML 图像用于在网页中插入图片。在网页设计和开发中，图像通常是不可或缺的元素之一。HTML 提供了多种方式来嵌入图像，使其适应各种情况和需求。

使用 img 标签插入图片

使用 img 标签来嵌入图片，如下所示：

<img src="image.jpg" alt="一个漂亮的风景" width="400" height="300">

img 标签必须有一个 src 属性来指定图片的 URL，也可以包含一些可选属性：

• alt 属性：若图片无法显示，将会显示 alt 属性的文本。
• width 和 height 属性：用于设置图片的宽和高。如果只设置其中一个属性，浏览器将按比例缩小或放大图片。

使用 CSS 样式设置图片

可以使用 CSS 样式来对图片进行设置。可以设置图片的大小、位置和透明度等。

<style>
  img {
    width: 50%;
    height: 50%;
    margin-left: 25%;
    opacity: 0.5;
  }
</style>

<img src="image.jpg" alt="一个漂亮的风景">

上述 CSS 将图片设置为 50% 的宽度和高度，并且水平居中。在这个例子中，我们还设置了图片的透明度为 50%。

使用 picture 标签设置不同尺寸的图片

使用 picture 标签，可以为不同的分辨率和设备设置不同的尺寸图片。在主图像无法加载或不可见的情况下，提供备用图像。

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px)" srcset="large.jpg">
  <img src="fallback.jpg" alt="My default image">
</picture>

在这个示例中，如果设备宽度小于或等于 600 像素，则显示 small.jpg，否则显示 large.jpg。如果其他图像都无法显示，创建一个备用图像来显示 fallback.jpg。

总结

HTML 图像是网页设计和开发的必要元素。可以使用 img 标签插入图片，并使用 CSS 样式来设置图片属性。可以使用 picture 标签为不同的分辨率和设备设置不同的图片，并且为主图像提供备用图像。