CSS實現自適應正方形

2022-08-09 22:45:26 字數 940 閱讀 6166

在處理移動端頁面時,我們有時需要將banner圖做成與螢幕等寬的正方形以獲得最佳效果。

方案一:css3   vw單位

css3中新增了一組相對於可視區域百分比的長度單位 vw,vh,vmin,vmax。

vw是相對於視口寬度的百分比, 1vw=1% viewport width

vh是相對於視口高度的百分比, 1vh=1% viewport height

vmin是相對於當前視口寬高中較小的乙個百分比單位

vmin是相對於當前視口寬高中較大的乙個百分比單位

利用vw單位,我們可以很方便的做出自適應的正方形:

.placeholder

優點:簡潔方便

缺點:瀏覽器相容不好

方案二:設定垂直方向的padding撐開容器

在css盒模型中,乙個比較容易被忽略的就是margin,padding的百分比數值計算。按照規定,margin、padding的百分比數值是相對父元素寬度進行計算的。由此可以發現只需將元素垂直方向的乙個padding值設定為與width相同的百分比就可以製作出自適應正方形了:

.placeholder

這種方案簡潔明瞭,且相容性好;但是填充內容後會出現問題,為了解決這個問題,我們可以設定容器的高度為 0

方案三:利用偽元素的margin(padding)-top撐開容器

在方案二中,我們利用百分比數值的padding-bottom屬性撐開容器內部空間,但是這樣做會導致在元素上設定的max-height屬性失效

.placeholder

.placeholder:after

純css實現自適應正方形

在處理移動端頁面時,我們有時會需要將banner圖做成與螢幕等寬的正方形以獲得最佳的體驗效果,如flipbord的移動頁面 方案一 css3 中新增了一組相對於可視區域百分比的長度單位 vw,vh,vmin,vmax。其中 vw 是相對於視口寬度百分比的單位,1vw 1 viewport width...

用css實現自適應正方形

用css實現自適應正方形 不多說,直接上 本文章一共例舉了3種方案 doctype html html lang en head meta charset utf 8 title css實現自適應正方形 title style 使用padding bottom實現正方形 square1 square...

Css實現自適應螢幕寬度的正方形

思路,正方形,長寬都一樣,需要找到乙個標準值然後再去設定盒子模型,可以用padding,margin,width height,正題開始 1.使用padding,原因,百分比是基於父元素的寬度,所以如果是根據父盒子的百分比來算,則可以使用這個方法 具體 如下 class square div squ...