图像、媒体和表单元素

图像、媒体和表单元素

替换元素

图像和视频被描述为替换元素。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。 但是，正如我们将看到的，CSS可以对图像执行多种操作。

某些替换元素（例如图像和视频）也被描述为具有宽高比。 这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。

调整图像大小

正如你从之前的几节课中所学到的那样，CSS中万物皆盒。如果你把一张图片放在一个盒子里，它的原始长和宽都比盒子的小或大，它要么比盒子显得小，要么从盒子里面溢出出去。你需要决定怎么处理溢出。

在下面的示例中，我们有两个盒子，大小均为200像素：

• 一个包含了一张小于200像素的图像，它比盒子小，所以不会拉伸以充满盒子。
• 另一张图像大于200像素，从盒子里面溢出。

.box {
  width: 200px;
}

img {

}

<div class="wrapper">
  <div class="box"><img src="star.png" alt="star"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons"></div>
</div>

所以我们能怎么处理溢出问题呢？

正如我们在我们之前的课程里面所学的那样，一个常用的技术是将一张图片的max-width设为100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素（例如<video>，或者<iframe>）起作用。

尝试向上面的示例中的<img>元素加入max-width: 100%，你会看到，小的图像不变，而大的变小了，能够放在盒子里。

你可以对容器内的图像作其他选择，例如，你可能想把一张图像调整到能够完全盖住一个盒子的大小。

object-fit属性可以在这里帮助你。当使用object-fit时，替换元素可以以多种方式被调整到合乎盒子的大小。

下面，我们已经使用了值cover，缩小了图像，维持了图像的比例，所以图像可以整齐地充满盒子，同时由于比例保持不变，图像的一部分将会被盒子裁切掉。

.box {
  width: 200px;
  height: 200px;
}

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

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;
}

<div class="wrapper">
  <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
</div>

如果我们将contain作为值，图像将会缩放到足以放到盒子里面的大小。如果它和盒子的比例不同，这将会导致“开天窗”的结果。

你可能也想试试fill值，它可以让图像充满盒子，但是不会维持比例。

布局中的替换元素

在替换元素使用各式CSS布局技巧时，你可能深切地体会到他们的展现略微与其他元素不同，例如，在一个flex或者grid布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。

你可以看到这在下面的示例中发生了，下面的示例有个两列两行的网格容器，里面有四个物件。所有的<div>元素有自己的背景色，拉伸到了充满行和列的地步。但是，图像并没有被拉伸。

<div class="wrapper">
  <img src="star.png" alt="star">
  <div></div>
  <div></div>
  <div></div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 20px;
}

.wrapper > div {
  background-color: rebeccapurple;
  border-radius: .5em;
}

如果你是按顺序读这些课，那么你可能还没有看到布局的部分，只要记住替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为，这很必要，避免了他们被布局奇怪地拉伸。

为了强制图像拉伸，以充满其所在的网格单元，你必须仿照下面做点事情：

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

这将会无条件地拉伸图像，所以很可能不会是你想要的。

form元素

用CSS格式化表单元素是一个需要技巧的工作，HTML Forms module 包含了详细的格式化表单元素的指导，所以我在这里不会全部复述。在本文的这一节有一些关键的值得关注的基础。

许多表格的控制是通过<input>元素的方式实现的，这定义了简单的表格区域，例如文字输入，更进一步还有HTML5新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的<textarea>，以及那些用来包含和标记表格的一些部分的元素，例如<fieldset>和<legend>。

HTML5还涵盖了一些特性，它们允许Web开发者表示哪些区域是必填的，甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容，或者让必填区域空白，浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上，并没有达成一致。

样式化文本输入元素

允许文本输入的元素，例如<input type="text">，特定的类型例如<input type="email">以及<textarea>元素，是相当容易样式化的，它们会试图表现得和在你的页面上其他盒子一样。不过这些元素默认的样式化方式会改变，取决于你的用户访问站点时所使用的操作系统和浏览器。

在下面的示例中，我们已经将一些文本输入用CSS样式化了，你可以看到例如边框、内外边距之类的东西都像你想要的那样生效了。我们正在使用特性选择器来指向不同的输入类型。尝试通过改变边框、向输入区域增加背景色、改变字体和内边距的方式来改变表单的外观。

input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover {
  background-color: #333;
}

<form>
  <div><label for="name">Name</label>
  <input type="text" id="name"></div>
  <div><label for="email">Email</label>
  <input type="email" id="email"></div>

  <div class="buttons"><input type="submit" value="Submit"></div>
</form>

重点：你应该在改变表单样式的时候小心，确保对于用户而言，它们仍然很容易被认出来是表单元素。你也许可以建立一个无边框的表单输入，其背景也与周围的内容难以区分开来，但是这会让表单很难识别和填入。

正如在本教程的HTML部分的form styling课里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同，并在许多浏览器上测试复杂的表单。

继承和表单元素

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。

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

form元素与box-sizing

跨浏览器的form元素对于不同的挂件使用不同的盒子约束规则。你已经在我们的盒模型课中学习了box-sizing属性，在样式化表单时候，你可以使用这一知识，确保在给form元素设定宽度和高度时可以有统一的体验。

为了保证统一，将所有元素的内外边距均设为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;
} 

备注：通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的CSS作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个Normalize.css，它被许多项目用作基础，是非常流行的样式表。

至于样式化表单的更加深入的信息，可以看下这些教程的HTML一节的这两篇文章：

• Styling HTML Forms
• Advanced Styling for HTML Forms