元素等比縮放解決方案
阿新 • • 發佈:2018-09-18
方案 相對 absolute red add bottom 定位 fff round
一、元素等比縮放解決方案
<style> /*等比縮放*/ .box{ position: relative; width: 50%; /* desired width */ background: #000; color: #fff; } .box:before{ content: ""; display: block; padding-top: 100%; background: #f00; } .content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <div class=‘box‘> <div class=‘content‘>1:1</div> </div>
包含內容的元素使用絕對定位布局,利用元素的padding的百分比屬性去設置元素的高度。
padding可以設置的值:
1、長度,非負的固定寬度
2、百分比,相對於父元素的寬度。
元素等比縮放解決方案