鍍金池/ 問答/HTML5  Android  HTML/ 關(guān)于移動端的九宮格布局問題(沒有用ui框架寫,是寫小程序的)

關(guān)于移動端的九宮格布局問題(沒有用ui框架寫,是寫小程序的)

第一疑問:

我在做一個類似朋友圈的功能,當它只有一張圖片時,
我會直接按照它圖片的原本尺寸直接放上去,導致圖片拉伸模糊,
例如我有一張1080x2160的圖片,我壓縮后還有316x512,我直接放
上去圖片的顯示就會不完整,效果如下  

clipboard.png
但我想要的是類似這圖片中的長圖片的效果
clipboard.png

請問這怎么設(shè)置,平時很少做移動端,比較笨

第二疑問:

這九宮格只有這一張圖片時,應(yīng)該是要設(shè)置最大的高度,但設(shè)置了后,
圖片的高度會大過你的最大高度,這是會截取,但不想截取,能否可以
將圖片全部顯示出來,等比例縮放嗎?

回答
編輯回答
孤巷

尺寸設(shè)置為:

max-width: 100%;
max-height: 100%;

或者用background-iamge,通過backgroun-size關(guān)鍵字控制

2017年9月9日 17:18