圖片、媒體和表單元素
在本課中，我們將探討 CSS 如何處理某些特殊元素。圖片、其他媒體和表單元素在用 CSS 樣式化時，行為與常規盒模型略有不同。瞭解哪些可以做到，哪些不可以，可以避免一些挫敗感，本課將重點介紹一些你需要了解的主要事項。
替換元素
圖片和影片被描述為替換元素。這意味著 CSS 不能影響這些元素的內部佈局，只能影響它們在頁面上與其他元素之間的位置。然而，正如我們將看到的，CSS 可以對圖片進行各種操作。
某些替換元素，如圖片和影片，也被描述為具有寬高比。這意味著它在水平 (x) 和垂直 (y) 維度上都有大小，並且預設情況下將使用檔案的固有尺寸顯示。
圖片尺寸調整
正如你從這些課程中學到的，CSS 中的所有內容都生成一個盒子。如果你將一張圖片放在一個比圖片檔案在任何方向上固有尺寸更小或更大的盒子中，它要麼顯得比盒子小，要麼溢位盒子。你需要決定如何處理溢位。
在下面的示例中，我們有兩個盒子，都為 200 畫素大小。
- 一個包含的圖片小於 200 畫素，它比盒子小，並且不會拉伸填充盒子。
- 另一個圖片大於 200 畫素，並溢位盒子。
<div class="wrapper">
<div class="box">
<img
alt="star"
src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
</div>
<div class="box">
<img
alt="balloons"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
</div>
.wrapper {
display: flex;
align-items: flex-start;
}
.wrapper > * {
margin: 20px;
}
.box {
border: 5px solid darkblue;
width: 200px;
}
img {
}
我們如何解決溢位問題？
正如我們在CSS 中調整專案大小中學到的，一個常見技術是將圖片的max-width設定為100%。這將使圖片能夠變得比盒子小，但不會變大。此技術也適用於其他替換元素，例如<video>或<iframe>。
嘗試在上面示例中的<img>元素規則中新增max-width: 100%。你會看到較小的圖片保持不變，但較大的圖片會縮小以適應盒子。
使用object-fit處理圖片溢位
你可以對容器內的圖片進行其他選擇。例如，你可能希望調整圖片大小以使其完全覆蓋一個盒子。
object-fit屬性可以在這裡幫助你。使用object-fit時，替換元素可以透過多種方式調整大小以適應盒子。
下面，第一個示例使用cover值，它會縮小圖片，同時保持寬高比，使其整齊地填充盒子。由於保持了寬高比，圖片的一些部分將被盒子裁剪。第二個示例使用contain作為值：它會縮小圖片，直到它足夠小以適應盒子內部。這會導致“信箱效果”，因為它與盒子的寬高比不同。
<div class="wrapper">
<div class="box">
<img
alt="balloons"
class="cover"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
<div class="box">
<img
alt="balloons"
class="contain"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
</div>
.wrapper {
display: flex;
align-items: flex-start;
}
.wrapper > * {
margin: 20px;
}
.box {
border: 5px solid darkblue;
width: 200px;
height: 200px;
}
img {
height: 100%;
width: 100%;
}
.cover {
object-fit: cover;
}
.contain {
object-fit: contain;
}
你也可以嘗試使用fill值，它將填充盒子但不會保持寬高比。
佈局中的替換元素
當對替換元素使用各種 CSS 佈局技術時，你可能會發現它們的行為與其他元素略有不同。例如，在網格佈局中，元素預設會拉伸以填充其整個網格區域。圖片不會拉伸；相反，它們會與網格區域的起始位置對齊。
你可以在下面的示例中看到這種情況，我們有一個兩列兩行的網格容器，其中有四個專案。所有<div>元素都有背景色並拉伸以填充行和列。然而，圖片不會拉伸。
<div class="wrapper">
<img
alt="star"
src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
<div></div>
<div></div>
<div></div>
</div>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 20px;
}
.wrapper > div {
background-color: rebeccapurple;
border-radius: 0.5em;
}
你將在後面的模組中學習佈局。現在，請記住，替換元素當它們成為特定佈局系統（如網格或彈性盒子）的一部分時，具有不同的預設行為，這主要是為了避免它們被佈局奇怪地拉伸。
表單元素
表單元素在用 CSS 樣式化時存在問題。Web 表單擴充套件模組涵蓋了樣式化某些表單輸入型別的更棘手方面，我們在此不贅述。然而，本節有幾個值得強調的關鍵基礎知識。
許多表單控制元件透過<input>元素新增到你的頁面中——這定義了簡單的表單欄位，如文字輸入，以及更復雜的欄位，如顏色和日期選擇器。還有一些額外的元素，如用於多行文字輸入的<textarea>，以及用於包含和標記表單部分的元素，如<fieldset>和<legend>。
HTML 還包含屬性，使 Web 開發人員能夠指出哪些欄位是必需的，甚至需要輸入的內容型別。如果使用者輸入了意想不到的內容，或留空了必填欄位，瀏覽器可以顯示錯誤訊息。不同的瀏覽器在允許此類專案的樣式和自定義方面有所不同。
樣式化文字輸入元素
允許文字輸入的元素，如<input type="text">、更具體的<input type="email">和<textarea>元素，都非常容易樣式化，並且行為通常與頁面上的其他盒子一樣。然而，這些元素的預設樣式會因使用者訪問網站的作業系統和瀏覽器而異。
在下面的示例中，我們使用 CSS 樣式化了一些文字輸入。你可以看到邊框、外邊距和內邊距等都按預期應用。我們使用屬性選擇器來定位不同的輸入型別。
嘗試編輯示例，透過調整邊框、為欄位新增背景色以及更改字型和內邊距來更改表單的外觀。
<form>
<div><label for="name">Name</label> <input id="name" type="text" /></div>
<div><label for="email">Email</label> <input id="email" type="email" /></div>
<div class="buttons"><input type="submit" value="Submit" /></div>
</form>
input[type="text"],
input[type="email"] {
border: 2px solid black;
margin-bottom: 1em;
padding: 10px;
width: 80%;
}
input[type="submit"] {
border: 3px solid #333333;
background-color: #999999;
border-radius: 5px;
padding: 10px 2em;
font-weight: bold;
color: white;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #333333;
}
警告：在更改表單元素的樣式時，應小心確保使用者仍然清楚它們是表單元素。你可以建立一個沒有邊框和背景的表單輸入，使其與周圍內容幾乎無法區分，但這會使其很難識別和互動。
許多更復雜的輸入型別由作業系統渲染，並且無法進行樣式設定。因此，你應該始終假定表單對於不同的訪問者來說會看起來非常不同，並在多個瀏覽器中測試複雜的表單。
規範化表單行為
表單元素在不同的瀏覽器和作業系統中的行為不同。本節探討了一些最常見的問題並提供了處理它們的策略。
繼承和表單元素
在某些瀏覽器中，表單元素預設不繼承字型樣式。因此，如果你想確保你的表單欄位使用在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，以防止某些舊瀏覽器在不需要時顯示捲軸。
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，它是一個非常流行的樣式表，被許多專案用作基礎。
總結
本課重點介紹了在使用 CSS 處理圖片、媒體和其他不尋常元素時你將遇到的一些差異。
在下一篇文章中，我們將為你提供一些測試，你可以用來檢查你對我們提供的關於在 CSS 中處理圖片和表單元素的資訊的理解和掌握程度。