解決使用百度UEditor編輯器后移動(dòng)端圖片被拉伸問(wèn)題

編輯：狂族晨曦 來(lái)源：WordPress技巧 日期：2016-01-20 閱讀： 9,860 次 搶個(gè)沙發(fā) 百度已收錄

本站之前的文章，基本存在一個(gè)問(wèn)題：用手機(jī)訪問(wèn)，查看文章時(shí)圖片有明顯縱向拉伸問(wèn)題。之前覺(jué)得沒(méi)什么，但是最近先森的強(qiáng)迫癥犯了，非要把這個(gè)問(wèn)題解決了不可。

開(kāi)始，先森以為是七牛緩存圖片的設(shè)置問(wèn)題，但是“七牛云儲(chǔ)存”插件、七?？臻g管理找來(lái)找去，設(shè)置多次之后，無(wú)奈的發(fā)現(xiàn)，問(wèn)題還是沒(méi)有解決。再后來(lái)，開(kāi)始懷疑是阿里云主機(jī)的問(wèn)題，但是通過(guò)測(cè)試也排除了。

最后，通過(guò)站長(zhǎng)之家的移動(dòng)跨屏模擬，查看審查元素后發(fā)現(xiàn)，圖片的高度，是先森在百度UEditor編輯器中給圖片設(shè)置的高（圖片單擊放大）。

經(jīng)過(guò)調(diào)試發(fā)現(xiàn)，<img>標(biāo)簽中的style就是影響移動(dòng)端自適應(yīng)的問(wèn)題所在。將整個(gè)style刪除后，既不會(huì)影響PC端圖片大小，也會(huì)使自適應(yīng)恢復(fù)。這也是吃了直接用網(wǎng)上代碼，先森自己沒(méi)有研究過(guò)自適應(yīng)的虧，發(fā)現(xiàn)問(wèn)題還繞了很大的彎。

通過(guò)排查發(fā)現(xiàn)，只要通過(guò)百度UEditor編輯器設(shè)置圖片的寬高，即會(huì)自動(dòng)添加width、height、border、vspace以及style屬性，style屬性中也包含width與height，也就是編輯器同時(shí)設(shè)置了兩組寬高。而我們要做到的是使UEditor編輯器設(shè)置圖片寬高時(shí)，不添加style屬性。

通過(guò)在官方文檔中尋找解決方法無(wú)果后，開(kāi)始在插件中的代碼中尋找，終于找到了關(guān)鍵代碼。

在服務(wù)器中打開(kāi)/wp-content/plugins/ueditor/ueditor/dialogs/image，找到image.js文件，打開(kāi)編輯（點(diǎn)擊放大）：

如上圖，打開(kāi)并找到第279行，將以下代碼刪除或注釋?zhuān)?/p>

style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"

如此，即可解決設(shè)置圖片時(shí)自動(dòng)添加style的問(wèn)題，也就解決了自適應(yīng)問(wèn)題。

有任何疑問(wèn)，歡迎在下方評(píng)論區(qū)提出，也歡迎在頁(yè)面頂部右方關(guān)注我的微博（@成航先森）。