鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 移動端fullPage中的圖片全屏變形，如何解決？

移動端fullPage中的圖片全屏變形，如何解決？

都知道fullPage全屏顯示，在移動端圖片也是全屏顯示，寬度和高度都是100%，圖片直接變形。移動端在不剪切圖片的情況下如何解決高度的問題？
圖片描述

回答
編輯回答
巷尾

可以考慮使用背景圖片，設(shè)置 background-size: cover，位置一般習(xí)慣性會設(shè)置成 background-position: center center，也可以根據(jù)圖片的焦點(diǎn)來仔細(xì)調(diào)整位置。

然后我仔細(xì)觀察了一下你的圖，我猜你還是想全部顯示出來，那么由于比例問題，一定會有空白區(qū)域，這種情況下，把背景色設(shè)置為接近圖片背景的顏色，或者就當(dāng)是寬幕電影，設(shè)置成黑色或深灰色，然后 background-size: contain, background-repeat: no-repeat，再把位置設(shè)置成居中。

2018年2月24日 12:32
編輯回答
晚風(fēng)眠

每款手機(jī)的長款比例都不一樣。不可能同一張圖片在設(shè)置width:100%;height:100%;的情況下都一個樣。
要么圖片做大一點(diǎn)，width和height其中一個100%；
你想一下嘛。一張500*100的圖片，非要去適應(yīng)500*500的容器。能不變行嗎。

2018年1月16日 13:56