建立回應式 iframe，寬度為父項的 100%，高度則維持特定可視區域比例
為圖片、
影片
和嵌入內容建立內建預留位置容器，避免項目載入並佔用空間時重新配置版面
為互動式資料視覺化或 SVG 動畫建立一致的回應式空間
為多個元素元件 (例如資訊卡或日曆日期) 建立一致的回應式空間
為多張不同尺寸的圖片建立一致的回應式空間 (可與
object-fit
一併使用)
object-fit
定義長寬比有助於我們在回應式環境中調整媒體大小。這個類別中的另一個工具是
object-fit
屬性，可讓使用者說明區塊中的物件 (例如圖片) 應如何填滿該區塊：
展現各種
object-fit
值。請參閱
Codepen 上的示範
。
initial
和
fill
值會重新調整圖片，填滿空間。在本例中，這會導致圖片遭到擠壓並模糊不清，因為系統會重新調整像素。不太理想。
object-fit: cover
會使用圖片的最小尺寸填滿空間，並根據這個尺寸裁剪圖片，使其符合空間大小。在最低邊界「放大」。
object-fit: contain
可確保圖片一律完整顯示，因此與
cover
相反，後者會採用最大邊界的大小 (以上述範例來說是寬度)，並調整圖片大小以維持內建長寬比，同時配合空間大小。
object-fit: none
案例顯示圖片在自然大小下，於中心位置裁剪 (預設物件位置)。
在處理不同尺寸的圖片時，
object-fit: cover
通常適用於大多數情況，可確保介面美觀一致，但這樣做會遺失資訊 (圖片最長邊緣會遭到裁剪)。
如果這些細節很重要 (例如處理美妝產品的平放拍攝照片時)，
裁剪重要內容就不可接受。因此，理想情況是提供不同大小的回應式圖片，讓圖片能配合使用者介面空間調整大小，且不會遭到裁剪。
舊方法：使用
padding-top
維持顯示比例
使用
padding-top
在輪轉介面中設定貼文預覽圖片的 1:1 長寬比。
如要讓這些元素更具回應性，可以使用顯示比例。這可讓我們設定特定比例大小，並根據個別軸 (高度或寬度) 調整其餘媒體。
目前廣為接受的跨瀏覽器解決方案是「Padding-Top Hack」，可根據圖片寬度維持顯示比例。這個解決方案需要父項容器和絕對位置的子項容器。然後以百分比計算長寬比，設為
padding-top
。例如：
顯示比例 1:1 = 1 / 1 = 1 =
padding-top: 100%
4:3 顯示比例 = 3 / 4 = 0.75 =
padding-top: 75%
長寬比 3:2 = 2 / 3 = 0.66666 =
padding-top: 66.67%
顯示比例 16:9 = 9 / 16 = 0.5625 =
padding-top: 56.25%
現在我們已找出長寬比值，可以將該值套用至父項容器。請參考以下範例：
<div class="container">
<img class="media" src="..." alt="...">
接著，我們可以編寫下列 CSS：
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
.media {
position: absolute;
top: 0;
使用 aspect-ratio 維持顯示比例
使用 aspect-ratio 在輪轉介面中，將貼文預覽圖片的顯示比例設為 1:1。
很遺憾，計算這些 padding-top 值並不容易，需要額外的負擔和定位。有了新的內建 aspect-ratio CSS 屬性，維持顯示比例的語言就更清楚了。
使用相同的標記，我們可以將 padding-top: 56.25% 替換為 aspect-ratio: 16 / 9，並將 aspect-ratio 設為 width / height 的指定比例。
使用 padding-top
.container {
width: 100%;
padding-top: 56.25%;
使用 aspect-ratio 而不是 padding-top 清楚許多，而且不會大舉修改邊框間距屬性，以執行超出一般範圍的動作。
這項新屬性也新增了將顯示比例設為 auto 的功能，其中「具有內建顯示比例的取代元素會使用該顯示比例；否則方塊沒有偏好的顯示比例」。如果同時指定 auto 和 <ratio>，除非是具有內建顯示比例的已取代元素，否則偏好的顯示比例是 width 除以 height 的指定比例，在這種情況下，系統會改用該顯示比例。
範例：格線中的一致性
這項功能也與 CSS 格線和 Flexbox 等 CSS 版面配置機制搭配得天衣無縫。假設您要維護子項的 1:1 顯示比例，例如贊助商圖示的格線：
<ul class="sponsor-grid">
<li class="sponsor">
<img src="..." alt="..."/>
<li class="sponsor">
<img src="..." alt="..."/>
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
.sponsor img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
如要設定圖片的顯示比例，也可以使用圖片屬性。如果事先知道圖片的尺寸，建議您將這些尺寸設為 width 和 height，這是最佳做法。
以上述範例來說，如果尺寸為 800 像素 x 600 像素，圖片標記會如下所示：<img src="image.jpg"
alt="..." width="800" height="600">。如果傳送的圖片具有相同的顯示比例，但不一定具有這些確切的像素值，我們仍可使用圖片屬性值設定比例，並搭配 width: 100% 的樣式，讓圖片佔用適當空間。總而言之，程式碼如下所示：
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
height: auto;
最終效果與透過 CSS 在圖片上設定 aspect-ratio 相同，且可避免累計版面配置位移 (請參閱 Codepen 上的範例)。
隨著多個新版瀏覽器推出新的 aspect-ratio CSS 屬性，在媒體和版面配置容器中維持適當的長寬比會更加簡單。
相片來源：Amy Shamblen 和 Lionel Gustave (透過 Unsplash)。
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2021-01-28 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2021-01-28 (世界標準時間)。"],[],[]]
