CSS 的aspect-ratio 屬性用於設(shè)定元素的寬高比，例如16:9 或4:3，使瀏覽器根據(jù)比例自動(dòng)計(jì)算高度或?qū)挾?。常?jiàn)使用場(chǎng)景包括：1. 圖片容器保持比例，避免變形；2. 視頻嵌入更穩(wěn)定，無(wú)需padding 技巧；3. 網(wǎng)格佈局中統(tǒng)一單元格比例。注意事項(xiàng)包括：設(shè)置width 和height 後aspect-ratio 可能失效，需注意瀏覽器兼容性，並配合object-fit 調(diào)整圖片顯示效果。

CSS 的aspect-ratio屬性能讓你輕鬆控制元素的寬高比例，避免用padding hack 或者JS 來(lái)實(shí)現(xiàn)響應(yīng)式佈局。它在圖片、視頻容器和網(wǎng)格佈局中特別實(shí)用。

什麼是aspect-ratio？

aspect-ratio的作用是設(shè)定一個(gè)元素的寬高比，比如16:9 或4:3。瀏覽器會(huì)根據(jù)這個(gè)比例自動(dòng)計(jì)算高度或?qū)挾龋唧w取決於你有沒(méi)有設(shè)置其中一個(gè)方向的尺寸。

舉個(gè)最簡(jiǎn)單的例子：

 .box {
  aspect-ratio: 16 / 9;
}

這樣，無(wú)論.box的寬度是多少，它的高度都會(huì)自動(dòng)調(diào)整為符合16:9 的比例。

常見(jiàn)使用場(chǎng)景

圖片容器保持比例

在做響應(yīng)式網(wǎng)頁(yè)時(shí)，圖片經(jīng)常會(huì)導(dǎo)致佈局“變形”。你可以給圖片容器加上aspect-ratio ，讓它始終保持固定比例。

 .image-container {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

這樣一來(lái)，不管圖片原始尺寸如何，都能填滿容器且不被拉伸。

視頻嵌入更穩(wěn)定

很多網(wǎng)站嵌入視頻時(shí)會(huì)用padding 技巧來(lái)維持比例，現(xiàn)在可以直接用aspect-ratio簡(jiǎn)化代碼。

 .video-wrapper {
  aspect-ratio: 16 / 9;
}

HTML 中直接放<iframe>就行，不用再寫額外樣式去撐開(kāi)高度。

網(wǎng)格佈局中的單元格統(tǒng)一比例

在CSS Grid 佈局中，如果你希望每個(gè)網(wǎng)格項(xiàng)都保持相同比例（比如畫廊頁(yè)面），也可以結(jié)合aspect-ratio使用。

 .grid-item {
  aspect-ratio: 1;
}

這樣每個(gè)網(wǎng)格項(xiàng)就是一個(gè)正方形，不會(huì)因?yàn)閮?nèi)容不同而變形。

注意事項(xiàng)和兼容性

• 優(yōu)先級(jí)問(wèn)題：如果你同時(shí)設(shè)置了width和height ， aspect-ratio可能會(huì)被忽略。它會(huì)在只設(shè)定了一個(gè)方向尺寸時(shí)起作用。
• 瀏覽器支持：主流現(xiàn)代瀏覽器都已經(jīng)支持，包括Chrome、Edge、Firefox 和Safari（從2022 年左右開(kāi)始）。如果你需要兼容老版本IE，還是得用padding 方案。
• 和圖片本身的比例衝突怎麼辦？如果圖片自身有寬高比，但父容器設(shè)置了aspect-ratio ，可能會(huì)出現(xiàn)裁剪或留白。這時(shí)候記得配合object-fit或object-position調(diào)整顯示效果。

基本上就這些。 aspect-ratio是一個(gè)非常實(shí)用但容易被忽略的屬性，特別是在響應(yīng)式設(shè)計(jì)中可以省不少事。用起來(lái)也不復(fù)雜，只要注意它的工作機(jī)制和適用範(fàn)圍就行。

以上是使用CSS axtive-ratio屬性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！