? ? ? 今天碰到了一個(gè)小難題，做手機(jī)端的網(wǎng)頁時(shí)，發(fā)現(xiàn)我的圖片超過了屏幕原有寬度。

? ? 那么今天就來和大家分享一下如何解決這個(gè)小錯(cuò)誤。

? ? 眾所周知，我們在做手機(jī)端頁面時(shí)，是不可以出現(xiàn)滾動(dòng)條的，因?yàn)闈L動(dòng)條是手機(jī)端頁面的禁區(qū)。

? ? 那么，我們應(yīng)該如何去解決它呢！我這里有幾個(gè)小方法大家可以一試。

? ? 1.img{max-width:100% !important;height:auto}

? ? 這是第一種方法，即給圖片增加一個(gè)最大寬度，這樣一來，即使圖片再大，也逃不出屏幕的五指山了。

? ? 這一種是最常用也最接近完美的方法。

? ? 2.當(dāng)然還有第二種方法，如果你很幸運(yùn)的使用的是框架，那么這種方法可能正好解決你的燃眉之急。

? ? 示例如下：

? ? 我們再寫樣式的時(shí)候，會(huì)用style標(biāo)簽引入

? ? <style lang="scss" scoped></style>

? ? 如果想解決問題的話，可以將scoped去掉，scoped的作用就是是每一個(gè)單個(gè)組件的樣式不會(huì)重復(fù)，

? ? 我們可以把他去掉，然后給組件內(nèi)容套一個(gè)最大的盒子.box{width: 100%;height: auto;}，

? ? 找到被渲染的圖片位置，加入.introduce-bottom{ max-width: 100%;img{width: 100% !important;

? ? height: auto !important;}

? ? 這樣就可以輕松的解決問題了哦！