作者Rosalina (羅莎莉娜)
看板Web_Design
標題[問題] app的圖片尺寸
時間Tue Feb 25 10:34:11 2014
做好app裡面要用的圖..上傳之後..朋友的手機看到圖片會被裁掉
我的手機的話圖片就是完整的
例如做1020 780大小的圖 ，如果字靠邊一點的話就會裁到
（好像會依手機不同來決定大小）
所以這樣子的話圖片也不能做有相框、邊框之類的設計＠＠
想請教這樣子應該怎麼處理呢？ 請多指點，謝謝大家！！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.115.55.241
1F：推 wlwillwell:針對img做class命名，然後載入行動裝置用的css 02/25 11:23
2F：→ wlwillwell:對該class以比例設定width與heigth就可以了 02/25 11:24
太感謝了 ！！︿︿
請問是不是這個語法呢
----------------------------------------------------
@media screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#myImg {
width:70%;
}
}
-----------------------------------------------------
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=0">
/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width :
480px) {
img { max-width: 100%; }
}
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) {
img { max-width: 100%; }
}
※ 編輯: Rosalina 來自: 59.115.55.241 (02/25 13:04)
3F：推 wlwillwell:是的，關鍵即是max-width:100%這個部分 02/25 16:45
4F：→ wlwillwell:不過要注意外層包的區塊不要以pixel設定寬度，然後超過 02/25 16:46
5F：→ wlwillwell:不然內層的img{max-width:100%}會以外層為基準長大 02/25 16:46