在网页文档中嵌入图像可以使用 HTML 里的 img 这个元素。

在文档里添加一个 img 元素，这种元素没有内容，所以可以直接在结束尖括号之前用一条斜线。设置一下 img 元素的属性，src 是必填的属性，它的就是要嵌入的图像的位置，我们可以嵌入一张来自网络的图像，图像的类型可以是 jpg，png 或者 webp。

一般图像需要还需要一个 alt 属性，它的值可以用文字描述一下这个图像。添加一个 alt 属性，它的值是描述文字，比如禾木村。

现在页面上就会显示这个嵌入的图像。在样式表里可以设置一下图像的样式，用 img 这个元素的名字作为选择器，想让图像适应包装它的容器的宽度，可以把 max-width 设置成 100%。

调整窗口的宽度，图像的宽度也会随着发生变化，并且图像会保持原有的比例显示。

如果你想让图像按任意指定的尺寸显示，可以给它设置一个具体的尺寸，你可以通过 width 还有 height 这两个样式属性设置图像元素的宽度与高度。

也可以在图像元素上用 width 还有 height 这两个属性。

比如在 img 元素上添加一个 width 属性，把图像的宽度设置成 300 像素，再把 height 设置成 300 像素。图像会按规定的尺寸显示，不过现在图像的显示比例发生了变化。

想让图像保持原有比例适应容器的大小，可以用一下 object-fit 这个样式属性，在这段样式里，用一下 object-fit 属性，把它的值设置成 contain，图像会适应容器的尺寸，按原有比例显示。再把这个 contain 换成 cover 试一下。这样图像会占满容器，并且也会保持原有比例显示。

aspect-ratio

aspect-ratio 可以控制容器的比例，这里我们把图像元素的 width 设置成 100%，然后用 aspect-ratio 设置一下容器比例，比如 1 / 1，现在图像会一直按 1:1 的比例显示。再按一下，把 aspect-ratio 的值改成 4/3 ，这样图像就会一直按 4:3 的比例显示。