[問題] RWD手機上圖片顯示變形

[acerder (阿捷)]

 想請問版上的各位高手，
 最近接了一個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://www.ptt.cc/bbs/Web_Design/M.1586492303.A.2C1.html
→ ymcheung: 可以啊
→ nottt: 可以啊
推 OKChika: 可以啊 不過我想先知道你的width跟height怎麼設定
→ Rplus: 美工 XD
→ acerder: 我是用max-width讓圖片自動等比縮放
→ acerder: max-width: 85%
→ acerder: 也試過object-fit: cover
→ acerder: 幾種讓圖片照原比例縮放的方式都試過了
→ acerder: 電腦上無論如何拉長拉寬網頁，圖片都正常比例顯示沒問題
→ acerder: 只有在18:9或19.5:9這樣的手機螢幕上看會被拉長
推 OKChika: 客戶用的手機瀏覽器是？可以把程式碼放上來看一下嗎？
推 OKChika: 另外我比較習慣img外面包div，img設width:100%、height
→ OKChika: 不設，用div去控制img寬度，例如：左右都加margin。
→ acerder: https://ecn.neocities.org/
→ acerder: 找了免費網頁空間放檔案上去
→ acerder: 我是只設定max-width，height不設，這樣會照原圖比例縮放
→ acerder: 客戶用的瀏覽器是chrome
推 OKChika: 你在img外面那層div的class加一個"items-center"試試看
→ OKChika: ，我加了這個，logo比例就正常了。
→ acerder: 可以了耶! 感謝OKChika大大的解答!