css使用aspect-ratio制作4:3和9:16和1:1等等比例布局

文章目錄

1. 前言
2. 用法
- 2.1 基本語法
- 2.2. 與max-width、max-height等屬性結合使用
- 2.3. 動態計算比例
3. 應用場景
4. 兼容性和替代方案
5. 總結

1. 前言

在網頁制作過程中，有時候我們只知道寬度，或者只知道高度，這時候需要制作一個4:3和9:16這種類似的盒子，不使用js而使用純css如何實現呢：

aspect-ratio 是 CSS 中用于定義元素寬高比的屬性。它允許開發者指定一個元素的寬度和高度之間的固定比例關系，無論元素的實際尺寸如何變化，都會保持這個比例。這種特性在響應式設計、圖片和視頻布局等場景中非常實用，能夠幫助開發者更輕松地控制元素的外觀和布局，避免因內容尺寸變化導致的布局錯亂問題。

2. 用法

下面列舉了一些常用的用法：

2.1 基本語法

aspect-ratio屬性接受一個由斜杠（/）分隔的兩個數字，表示寬度與高度的比例，其語法如下：

element {aspect-ratio: <width> / <height>;
}

其中，width和height為非負數字，例如：

.box {aspect-ratio: 16 / 9; /* 常見的視頻寬高比 */width: 500px;background-color: lightblue;
}

在上述代碼中，.box元素的寬度設置為500px，由于aspect-ratio設置為16/9，因此該元素的高度會自動計算為500px * 9 / 16 = 281.25px，從而保持16:9的寬高比。

2.2. 與max-width、max-height等屬性結合使用

aspect-ratio屬性可以與max-width、max-height等屬性配合，實現更靈活的響應式布局。例如：

.image-container {max-width: 800px;aspect-ratio: 4 / 3;overflow: hidden;
}.image-container img {width: 100%;height: 100%;object-fit: cover;
}

在這個例子中，.image-container的最大寬度為800px，并且保持4:3的寬高比。內部的圖片會自動填滿容器，并通過object-fit: cover屬性確保圖片在保持比例的同時，完整顯示內容。

2.3. 動態計算比例

aspect-ratio的值也可以通過 CSS 變量（var()）動態計算，以適應不同的布局需求：

:root {--ratio-width: 2;--ratio-height: 1;
}.dynamic-box {aspect-ratio: var(--ratio-width) / var(--ratio-height);background-color: lightcoral;
}

通過修改 CSS 變量的值，可以輕松改變元素的寬高比，而無需修改大量的 CSS 代碼。

3. 應用場景

下面列舉了一些常見的應用場景：

響應式圖片和視頻布局

在響應式設計中，aspect-ratio屬性常用于保持圖片和視頻的比例，防止其在不同設備上拉伸變形。例如，對于視頻播放器：

.video-player {width: 100%;aspect-ratio: 16 / 9;
}

無論設備屏幕寬度如何變化，視頻播放器都會始終保持16:9的比例，確保視頻的正確顯示。

卡片式布局

在卡片式布局中，使用aspect-ratio可以讓卡片在不同屏幕尺寸下保持一致的外觀。例如：

.card {width: 300px;aspect-ratio: 3 / 4;border: 1px solid #ccc;border-radius: 10px;overflow: hidden;
}

這樣，每張卡片都會保持固定的寬高比，即使卡片內容有所不同，整體布局也會顯得整齊有序。

圖表和圖形繪制

在繪制圖表、流程圖等圖形時，aspect-ratio可以幫助開發者精確控制圖形的比例，使其在不同屏幕上都能正確顯示。例如：

.chart {width: 600px;aspect-ratio: 5 / 3;background-color: #f9f9f9;
}

通過設置合適的寬高比，圖表可以更好地展示數據，提升視覺效果。

4. 兼容性和替代方案

雖然aspect-ratio屬性功能強大，但在使用時需要注意其瀏覽器兼容性：

環境	版本	支持情況
Chrome	89+	支持
Firefox	87+	支持
Edge	89+（新版本基于Chromium）	支持
Safari	15.4+	支持

對于不支持aspect-ratio屬性的舊版瀏覽器，可以使用 JavaScript 來實現類似的效果。或者利用css里百分比 padding 是相對于父容器寬度計算的這個特性來實現：

通過 JavaScript 監聽窗口大小變化，動態計算并設置元素的高度：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Aspect Ratio Fallback</title><style>.fallback-box {width: 100%;background-color: lightgreen;}</style>
</head><body><div class="fallback-box" id="fallbackBox"></div><script>const fallbackBox = document.getElementById('fallbackBox');const ratio = 16 / 9;function setBoxHeight() {const width = fallbackBox.offsetWidth;fallbackBox.style.height = (width / ratio) + 'px';}window.addEventListener('load', setBoxHeight);window.addEventListener('resize', setBoxHeight);</script>
</body>
</html>

css里百分比 padding 是相對于父容器寬度計算的特性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Aspect Ratio Fallback</title><style>.container {width: 400px; /* 可以根據需要調整寬度 */position: relative;}/* 設置 .box 的 height: 0，然后通過 padding-top: 75% 來創建高度。 因為 padding-top 的百分比是基于父容器的寬度計算 *//* 所以 75% 表示高度是寬度的 75%，即實現了 4:3 的比例（3 ÷ 4 = 0.75）。 */.box {height: 0;padding-top: 75%; /* 3/4 = 0.75 = 75% */background-color: lightblue;position: relative;}/* 如果你想在盒子里放內容，可以用一個絕對定位的子元素 */.box-content {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}</style>
</head><body><div class="container"><div class="box"></div></div>
</body>
</html>

這2種方式可以在不支持aspect-ratio屬性的瀏覽器中，模擬出類似的寬高比效果。

5. 總結

aspect-ratio屬性為 CSS 開發者提供了一種簡單而有效的方式來控制元素的寬高比，極大地簡化了響應式設計和布局的實現過程。盡管存在一定的瀏覽器兼容性問題，但隨著主流瀏覽器的不斷更新，該屬性的應用將會越來越廣泛。在實際項目中，合理運用aspect-ratio屬性，可以提升頁面的視覺效果和用戶體驗，使布局更加靈活和美觀。

本次分享就到這兒啦，我是鵬多多，如果您看了覺得有幫助，歡迎評論，關注，點贊，轉發，我們下次見~

往期文章

flutter-使用extended_image操作圖片的加載和狀態處理以及緩存和下載
flutter-制作可縮放底部彈出抽屜評論區效果
flutter-實現Tabs吸頂的PageView效果
Vue2全家桶+Element搭建的PC端在線音樂網站
助你上手Vue3全家桶之Vue3教程
助你上手Vue3全家桶之VueX4教程
助你上手Vue3全家桶之Vue-Router4教程
超詳細！Vue的九種通信方式
超詳細！Vuex手把手教程
使用nvm管理node.js版本以及更換npm淘寶鏡像源
vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令

個人主頁

CSDN
GitHub
簡書
博客園
掘金

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/79027.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/79027.shtml
英文地址，請注明出處：http://en.pswp.cn/web/79027.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！