奇淫技巧:移動端圖片處理,設定最大寬度,高度等比處理
阿新 • • 發佈:2019-02-12
有這樣的應用場景:
PC端和移動端共用了控制器,但是他們的html渲染是不同的,那麼在PC後臺裡錄入的一些圖片咋整,有的圖片在 img 標籤裡被編輯器定義了寬高,一般CSS影響不到
思路:
移動端處理這個問題時,首先應該保證img的最大寬度不能超過螢幕大小,不然就會顯示不全,所以應該定義max-width。
假設移動端寬度 640px,編輯器中有圖片 img src="xx" style="width:1000px;height:500px;" 那麼我們看到由於受max-width影響,寬度變成了最大640px,但是高度還是500哎,於是圖片變形了
有人會說,我可以用js來控制它的高度的,通過算取原來的寬高比,然後縮放和保持這個比例就可以了。
bingo,親測可用,我以前也是這麼做的。但是我們要是能去掉它的高度屬性,那麼高度不是自動跟著變的麼?這樣通過純css就能處理了,不需要再引入一段js程式碼了。
看這裡:
.line-more-info .content img{
height: auto !important;
max-width: 100% !important;
}
多的我就不說了,拿去用吧