影像、媒體和表單元素

影像和影片被稱為 **替換元素**。這意味著 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 構建塊
• 下一篇