图像、媒体和表单元素

图像和视频被称为 **替换元素**。这意味着 CSS 无法影响这些元素的内部布局 - 只能影响它们在页面上相对于其他元素的位置。然而，正如我们将看到的那样，CSS 可以对图像做很多事情。

某些替换元素，例如图像和视频，也称为具有 **纵横比**。这意味着它在水平 (x) 和垂直 (y) 方向上都有大小，并且默认情况下将使用文件的固有尺寸显示。

正如您从这些课程中了解到的，CSS 中的一切都会生成一个盒子。如果您将图像放置在一个比图像文件固有尺寸在任一方向上都小或大的盒子中，它要么看起来比盒子小，要么溢出盒子。您需要决定如何处理溢出问题。

在下面的示例中，我们有两个盒子，它们的大小都是 200 像素

• 其中一个包含一个比 200 像素小的图像 - 它比盒子小，并且不会拉伸以填充盒子。
• 另一个比 200 像素大，并且溢出盒子。

那么，我们如何处理溢出问题呢？

正如我们在 上一课 中了解到的，一个常见的技巧是将图像的 max-width 设置为 100%。这将使图像的大小可以小于盒子，但不能大于盒子。此技巧也适用于其他替换元素，例如 <video> 或 <iframe>。

尝试在上面的示例中向 <img> 元素添加 max-width: 100%。您将看到较小的图像保持不变，而较大的图像变小以适应盒子。

您可以在容器中的图像上做出其他选择。例如，您可能希望调整图像大小，使其完全覆盖盒子。

object-fit 属性可以帮助您。当使用 object-fit 时，替换元素可以以多种方式调整大小以适应盒子。

下面我们使用了 cover 值，它会缩小图像，保持纵横比，使其整齐地填充盒子。由于纵横比保持不变，因此图像的某些部分会被盒子裁剪掉。

如果我们使用 contain 作为值，图像将缩小，直到它足够小以适应盒子。如果它与盒子没有相同的纵横比，这会导致“信箱”。

您也可以尝试 fill 值，它会填充盒子，但不会保持纵横比。

当对替换元素使用各种 CSS 布局技巧时，您可能会发现它们的行为与其他元素略有不同。例如，在网格布局中，元素默认情况下会拉伸以填充其整个 网格区域。图像不会拉伸；而是对齐到网格区域的开头。

您可以在下面的示例中看到这一点，我们有一个两列两行的网格容器，其中有四个项目。所有 <div> 元素都有背景颜色并拉伸以填充行和列。但是，图像不会拉伸。

如果您正在按顺序学习这些课程，那么您可能还没有看过布局。请记住，替换的元素，当它们成为网格或弹性布局的一部分时，具有不同的默认行为，本质上是为了避免它们被布局奇怪地拉伸。

要强制图像拉伸以填充它所在的网格单元格，您需要执行以下操作

img {
  width: 100%;
  height: 100%;
}

但是，这会拉伸图像，因此可能不是您想要做的事情。

表单元素在使用 CSS 进行样式化时可能很棘手。 Web 表单模块 包含有关样式化这些元素更复杂方面的详细指南，我不会在这里全部复制。但是，在本节中，有一些关键的基本知识值得强调。

许多表单控件通过 <input> 元素添加到您的页面 — 这定义了简单的表单字段，例如文本输入，一直到更复杂的字段，例如颜色和日期选择器。还有一些额外的元素，例如 <textarea> 用于多行文本输入，以及用于包含和标记表单部分的元素，例如 <fieldset> 和 <legend>。

HTML 还包含属性，使 Web 开发人员能够指示哪些字段是必需的，甚至需要输入的内容类型。如果用户输入了意外的内容，或者留下了必填字段为空，浏览器会显示错误消息。不同的浏览器在允许对这些项目进行多少样式和自定义方面有所不同。

允许文本输入的元素，例如 <input type="text">，以及更具体的 <input type="email">，以及 <textarea> 元素很容易样式化，并且倾向于像您页面上的其他框一样表现。但是，这些元素的默认样式将根据用户访问网站的操作系统和浏览器而有所不同。

在下面的示例中，我们使用 CSS 对一些文本输入进行了样式化 — 您会看到诸如边框、边距和填充之类的内容都按预期适用。我们使用属性选择器来定位不同的输入类型。尝试通过调整边框、向字段添加背景颜色以及更改字体和填充来改变此表单的外观。

如有关 样式化 Web 表单 的课程中所述，许多更复杂的输入类型由操作系统呈现，并且无法进行样式化。因此，您应该始终假设表单对于不同的访问者看起来会有很大不同，并在多个浏览器中测试复杂的表单。

在某些浏览器中，表单元素默认情况下不会继承字体样式。因此，如果您想确保您的表单字段使用在 body 上或父元素上定义的字体，您应该将此规则添加到您的 CSS 中。

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

在不同的浏览器中，表单元素使用不同的盒模型规则来表示不同的小部件。您在 我们的盒模型课程 中了解了 box-sizing 属性，您可以在样式化表单时使用此知识来确保在设置表单元素的宽度和高度时获得一致的体验。

为了保持一致性，最好将所有元素的边距和填充设置为 0，然后在样式化特定控件时将它们添加回来

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

除了上面提到的规则之外，您还应该在 <textarea> 上设置 overflow: auto 以阻止 IE 在不需要时显示滚动条

textarea {
  overflow: auto;
}

作为最后一步，我们可以将上面讨论的各种属性包装到以下“表单重置”中，以提供一致的基础供您使用。这包括最后三节中提到的所有内容

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}

有关样式化表单的更多信息，请查看这些指南的 HTML 部分中的两篇文章。

• 样式化 Web 表单
• 高级表单样式

您已经读完了本文，但您还记得最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证您是否保留了这些信息 — 请查看 测试您的技能：图像和表单元素。

本课程重点介绍了在使用 CSS 处理图像、媒体和其他不寻常元素时会遇到的差异。

在下一篇文章中，我们将学习如何 样式化 HTML 表格。

• 上一篇
• 概述：CSS 构建块
• 下一篇