使用 aspect-ratio 和 object-fit 可實(shí)現(xiàn)響應(yīng)式圖片裁切，通過設(shè)置容器寬高比并用 object-fit: cover 裁剪圖片，確保圖片填充容器且保持比例，常用 padding-bottom 技巧兼容性好。
在響應(yīng)式設(shè)計(jì)中，保持圖片的寬高比同時(shí)進(jìn)行裁切，常見于頭像、卡片圖、輪播圖等場景。我們可以通過 CSS 的 object-fit 和 aspect-ratio 屬性輕松實(shí)現(xiàn)這一效果。
為圖片容器設(shè)置固定的寬高比，使其在不同屏幕尺寸下仍保持比例。
aspect-ratio: 16 / 9;這會讓容器始終維持 16:9 的比例，即使寬度變化，高度也會自動調(diào)整。
當(dāng)圖片尺寸與容器不匹配時(shí)，object-fit 可控制圖片如何填充容器：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
以下是一個(gè)響應(yīng)式正方形裁切圖片的典型寫法：
.container { width: 100%; height: 0; padding-bottom: 100%; /* 1:1 寬高比 */ position: relative; overflow: hidden; }.container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
這種技巧利用 padding-bottom 實(shí)現(xiàn)動態(tài)寬高比，兼容性好，適合各種響應(yīng)式布局。
基本上就這些，關(guān)鍵在于容器定比例、圖片用 cover 填充，自然實(shí)現(xiàn)裁切不失真。
以上就是css響應(yīng)式圖片裁切保持寬高比的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
每個(gè)人都需要一臺速度更快、更穩(wěn)定的 PC。隨著時(shí)間的推移，垃圾文件、舊注冊表數(shù)據(jù)和不必要的后臺進(jìn)程會占用資源并降低性能。幸運(yùn)的是，許多工具可以讓 Windows 保持平穩(wěn)運(yùn)行。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
876
收藏
