課程
/前端開發(fā)
/WebApp
/移動端的WEB相冊
可不可以實現(xiàn)使用同樣的圖片，并且小圖顯示時圖片壓縮而不是只顯示圖片的一部分
2017-06-11
源自：移動端的WEB相冊 3-9
正在回答
tmpl += '<li data-id="'+i+'" ><canvas class="animated bounceIn" id="cvs_'+i+'" style="width:' + picWidth + 'px;height:' + picWidth + 'px;padding-left:' + p + 'px;padding-top:' + padding+ 'px"></canvas></li>';把style放在canvas里，不放在li里可以實現(xiàn)縮略圖。
我前面也在思考這樣的問題，只要考慮性能以后你就知道為什么不用同樣的照片了。如果一開始加載的也是大圖，那會很消耗流量而且速度慢。另，如果要解決你的問題，并且使用canvas，可先縮放正常圖片的高（寬）度為canvas高（寬）度的100%，然后進行繪制（這樣能保證一個大致的比例，圖片不會過于拉伸或變形，如果寬高都是100%就會出現(xiàn)這種問題。）。個人建議最好以canvas的高度為基準(zhǔn)，這樣一來大部分的圖都能繪制完全。以寬度100%，高度自動的情況下，特別長的圖片填充不滿高度。
以下是個簡單的參照寬度與高度例子，你可以在codepen上試試。
以高度為參照：
div{width;200px;height:200px;overflow:hidden} div?img{height:100%;width:auto;}
以寬度為參照：
div{width;300px;height:300px;overflow:hidden} div?img{height:auto;width:100%;}
本人也才學(xué)不久，希望以上答案對你有幫助，說的不對的地方，還望多多包涵。
舉報
本課程通過一個移動端相冊案例，帶您一步步了解移動端框架
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-11-26
tmpl += '<li data-id="'+i+'" ><canvas class="animated bounceIn" id="cvs_'+i+'" style="width:' + picWidth + 'px;height:' + picWidth + 'px;padding-left:' + p + 'px;padding-top:' + padding+ 'px"></canvas></li>';把style放在canvas里，不放在li里可以實現(xiàn)縮略圖。
2017-07-13
我前面也在思考這樣的問題，只要考慮性能以后你就知道為什么不用同樣的照片了。如果一開始加載的也是大圖，那會很消耗流量而且速度慢。另，如果要解決你的問題，并且使用canvas，可先縮放正常圖片的高（寬）度為canvas高（寬）度的100%，然后進行繪制（這樣能保證一個大致的比例，圖片不會過于拉伸或變形，如果寬高都是100%就會出現(xiàn)這種問題。）。個人建議最好以canvas的高度為基準(zhǔn)，這樣一來大部分的圖都能繪制完全。以寬度100%，高度自動的情況下，特別長的圖片填充不滿高度。
以下是個簡單的參照寬度與高度例子，你可以在codepen上試試。
以高度為參照：
div{width;200px;height:200px;overflow:hidden} div?img{height:100%;width:auto;}以寬度為參照：
div{width;300px;height:300px;overflow:hidden} div?img{height:auto;width:100%;}本人也才學(xué)不久，希望以上答案對你有幫助，說的不對的地方，還望多多包涵。