如何在 HTML 中插入图像？

在网站设计中，插入图像是必不可少的。下面我们将介绍如何在 HTML 中插入图像。

1. 使用 标签

在 HTML 中插入图像，最常用的方式就是使用 标签。

<img src="img/flower.jpg" alt="Flower">

上面的代码中，src 属性指定了图像的路径和文件名。我们还可以使用 alt 属性来为图像指定一个文本描述。如果图像无法加载，则会显示 alt 属性指定的文本信息。

注意，为了避免目录路径出现问题，我们通常会将图像放置在与 HTML 文件同级别的文件夹中，如上述代码中的 img 文件夹。

2. 使用响应式图像

在移动设备等小屏幕设备上浏览网页时，如果我们使用了大尺寸的图像，则可能会影响网页加载速度，因此我们需要使用响应式图片。

<picture>
  <source media="(max-width: 768px)" srcset="img/flower-medium.jpg">
  <source media="(min-width: 769px)" srcset="img/flower-large.jpg">
  <img src="img/flower.jpg" alt="Flower">
</picture>

上面的代码中，我们使用 <picture> 标签包含了多个 <source> 标签和一个 <img> 标签。在 <source> 标签中，使用了 media 属性来指定媒体查询条件，srcset 属性指定不同尺寸的图像文件。如果浏览器支持 <picture> 标签，则会选择最符合条件的 <source> 标签中的图像文件加载。

3. 使用CSS设置图像背景

我们还可以使用 CSS 的 background-image 属性来设置图像背景。

<div class="image"></div>

.image {
  background-image: url("img/flower.jpg");
  width: 300px;
  height: 200px;
}

上述代码中，我们为 <div> 元素设置了一个背景图像，并设置了宽度和高度。可以通过 background-position 属性来调整背景图像的显示位置。

总结

在 HTML 中插入图像，我们可以使用 标签，也可以使用响应式图像和 CSS 中的 background-image 属性进行设置。无论采用哪种方式，都需要注意图像的路径和文件名，以及最佳显示大小和格式。