溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在實現元素自適應屏幕大小之前，我們先來介紹一個css知識點。
元素的margin和padding屬性的值（無論是上下邊距還是左右邊距）如果設置為百分比，都是以寬度為基準計算的。
也就是說，在已知寬高比的情況下，css雖然不能確定height的值，但是可以確定padding-top等屬性的值。
實現思路：
1、算出寬高比（高 / 寬），并設置為padding-top的值，height設置為0（由padding-top撐起元素的高度）。
2、此時元素的實際內容被擠到了下方，所以用絕對定位改變其位置。
（視頻教程推薦：css視頻教程）
實現代碼：
html代碼：
<div class="ac_coupon-wrap">
<div class="ac_coupon-content">
<!-- 內容 -->
</div>
</div>css代碼：
.ac_coupon-wrap {
height: 0;
padding-top: 15.16%;
position: relative;
.ac_coupon-content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
}
}以上就是css實現元素自適應屏幕大小的思路是什么的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
