图片

图片相关 HTML 标签

<img> 标签：

• <img> 是空元素，这意味着不能有子元素以及不需要结束标签
• src 和 alt 是 <img> 最有用的两个属性
  • src 属性可以是相对路径 URL 或者绝对路径 URL
  • alt 属性是图片的文本描述，当图片加载失败会显示出来
• 可以通过 width 和 height 这两个属性去指定图片的宽度和长度
  • 值为整数
  • 单位默认为 px

要为图片添加标题，可以使用 <figure> 和 <figcaption> 元素。这些元素为图形提供语义容器，并清晰地链接图形和标题：

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
 
  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

figure可以包含多个图片，但是它也可以包含代码片段、音频、视频、方程式、表格或者其他内容。

参考资料

• Images in HTML
• The Image Embed element

使用 CSS 调整图片大小

通过 object-fit 属性来调整图片大小来适应容器，如：

.image {
	object-fit: cover;
}

参考资料

• Images, media, and form elements
• object-fit

CSS 背景图片

当图片有意义的时候使用 <img> 标签，如果图片起装饰作用则使用 CSS 背景。通过 CSS background-image 属性添加背景图片，还有其他 background-* 属性可以控制背景图片的位置：

p {
  background-image: url("images/dinosaur.jpg");
}

• 默认情况下，当背景图片比容器大，则大图片不会缩小以适应容器。当背景图片比容器小，则小图片会平铺以填满容器
• 要控制小图片的平铺行为，可以使用 background-repeat 属性
• 如果同时指定背景图片（background-image）和背景颜色（background-color），则图片将显示在颜色之上
• 通过 background-size 调整图片大小
• 通过 background-position 定位背景图片

参考资料

• Backgrounds and borders