本文可以延伸為自適應(yīng)的時(shí)候等比例縮放圖片，避免出現(xiàn)白邊或者顯示不全的問(wèn)題！

1、寬度100%時(shí)候，圖片的height高度完全可以用PC端寬高百分比，用vw進(jìn)行判斷！

2、或者直接使用height=0，然后用padding-bottom撐開(kāi)高度！

JavaScript實(shí)現(xiàn)自適應(yīng)瀏覽器寬度，可以監(jiān)聽(tīng)onresize事件。

純CSS實(shí)現(xiàn)自適應(yīng)瀏覽器寬度的正方形有以下三種方法：

1、方案一：CSS3 vw 單位

CSS3 中新增了一組相對(duì)于可視區(qū)域百分比的長(zhǎng)度單位vw、vh、vmin、vmax。其中vw是相對(duì)于視口寬度百分比的單位，1vw = 1% viewport width，vh是相對(duì)于視口高度百分比的單位，1vh = 1% viewport height；vmin是相對(duì)當(dāng)前視口寬高中較小的一個(gè)的百分比單位，同理 vmax是相對(duì)當(dāng)前視口寬高中較大的一個(gè)的百分比單位。

#square{  
    width:30%;  
    height:0;  
    padding-bottom: 30%;  
    background:red;  
}

類比：純CSS實(shí)現(xiàn)自適應(yīng)瀏覽器高度的正方形只需要設(shè)置width的單位為vh即可。

優(yōu)點(diǎn)：簡(jiǎn)潔方便。

缺點(diǎn)：瀏覽器兼容不好。

2、方案二：設(shè)置垂直方向的padding撐開(kāi)容器

由于margin, padding 的百分比數(shù)值是相對(duì)父元素的寬度計(jì)算的，只需將元素垂直方向的一個(gè)padding值設(shè)定為與width相同的百分比就可以制作出自適應(yīng)正方形了。

但要注意，僅僅設(shè)置padding-bottom是不夠的，若向容器添加內(nèi)容，內(nèi)容會(huì)占據(jù)一定高度，為了解決這個(gè)問(wèn)題，需要設(shè)置height: 0。

#square{  
    width:30%;  
    height:0;  
    padding-bottom: 30%;  
    background:red;  
}

優(yōu)點(diǎn)：簡(jiǎn)潔明了，且兼容性好。

缺點(diǎn)：會(huì)導(dǎo)致在元素上設(shè)置的max-width屬性失效（max-height不收縮）。

3、利用偽元素的 margin(padding)-top 撐開(kāi)容器

max-width屬性失效的原因是：max-width屬性只限制于width，也就是只會(huì)對(duì)元素的 content width起作用。

解決方法是：用一個(gè)子元素?fù)伍_(kāi)content部分的高度，從而使max-height屬性生效。

首先需要設(shè)置偽元素，其內(nèi)容為空，margin-top設(shè)置為100%。

但要注意，若使用垂直方向上的margin撐開(kāi)父元素，僅僅設(shè)置偽元素是不夠的，這涉及到margin collapse外邊距合并的概念，由于容器與偽元素在垂直方向發(fā)生了外邊距合并，所以撐開(kāi)父元素高度并沒(méi)有出現(xiàn)，解決方法是在父元素上觸發(fā)BFC：設(shè)置overflow:hidden。

#square{    
    width:30%;    
    background:red;  
    overflow:hidden;    
    max-width:200px;  
}    
#square:after{    
    content: '';    
    display: block;    
    margin-top:100%;    
}

若使用垂直方向上的padding撐開(kāi)父元素，則不需要觸發(fā)BFC。

#square{  
    width:30%;  
    background:red;  
    max-width:200px;  
}  
#square:after{  
    content: '';  
    display: block;  
    padding-top:100%;  
}