作者acerder (阿捷)
看板Web_Design
標題[問題] RWD手機上圖片顯示變形
時間Fri Apr 10 12:18:20 2020
想請問版上的各位高手，
最近接了一個WEB系統開發的案子，
Login頁面找了前端美工幫忙處理，
其中Logo去背轉成PNG，
並用了各種方法等比例縮放圖片，
但在客戶的手機上
18 : 9 或 18.5 : 9 及 19.5 : 9
這幾種比例的手機上，看到的LOGO都會被拉長，
https://reurl.cc/9Ep99Y
以上連結，左邊是正常16:9的手機看到的正常LOGO比例
右邊是客戶的手機看到被拉長的LOGO，
想請問各位大大這樣的變形有方法解決嗎?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.136.111.132 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1586492303.A.2C1.html
1F：→ ymcheung: 可以啊 04/10 12:48
2F：→ nottt: 可以啊 04/10 13:26
3F：推 OKChika: 可以啊 不過我想先知道你的width跟height怎麼設定 04/10 22:38
4F：→ Rplus: 美工 XD 04/11 01:30
5F：→ acerder: 我是用max-width讓圖片自動等比縮放 04/11 15:52
6F：→ acerder: max-width: 85% 04/11 15:53
7F：→ acerder: 也試過object-fit: cover 04/11 15:54
8F：→ acerder: 幾種讓圖片照原比例縮放的方式都試過了 04/11 15:55
9F：→ acerder: 電腦上無論如何拉長拉寬網頁，圖片都正常比例顯示沒問題 04/11 15:57
10F：→ acerder: 只有在18:9或19.5:9這樣的手機螢幕上看會被拉長 04/11 15:58
11F：推 OKChika: 客戶用的手機瀏覽器是？可以把程式碼放上來看一下嗎？ 04/12 01:42
12F：推 OKChika: 另外我比較習慣img外面包div，img設width:100%、height 04/12 01:49
13F：→ OKChika: 不設，用div去控制img寬度，例如：左右都加margin。 04/12 01:49
15F：→ acerder: 找了免費網頁空間放檔案上去 04/12 11:42
16F：→ acerder: 我是只設定max-width，height不設，這樣會照原圖比例縮放 04/12 11:44
17F：→ acerder: 客戶用的瀏覽器是chrome 04/12 11:46
18F：推 OKChika: 你在img外面那層div的class加一個"items-center"試試看 04/13 02:08
19F：→ OKChika: ，我加了這個，logo比例就正常了。 04/13 02:08
20F：→ acerder: 可以了耶! 感謝OKChika大大的解答! 04/13 10:59