[問題] RWD手機上圖片顯示變形 acerder PTT批踢踢實業坊

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

作者: acerder (阿捷) 2020-04-10 12:18:20

想請問版上的各位高手，
最近接了一個WEB系統開發的案子，
Login頁面找了前端美工幫忙處理，
其中Logo去背轉成PNG，
並用了各種方法等比例縮放圖片，
但在客戶的手機上
18 : 9 或 18.5 : 9 及 19.5 : 9
這幾種比例的手機上，看到的LOGO都會被拉長，
https://reurl.cc/9Ep99Y
以上連結，左邊是正常16:9的手機看到的正常LOGO比例
右邊是客戶的手機看到被拉長的LOGO，
想請問各位大大這樣的變形有方法解決嗎?

作者: ymcheung (ymc) 2020-04-10 12:48:00

可以啊

作者: nottt (無) 2020-04-10 13:26:00

可以啊

作者: OKChika (跡卡) 2020-04-10 22:38:00

可以啊不過我想先知道你的width跟height怎麼設定

作者: Rplus (R+) (9527) 2020-04-11 01:30:00

美工 XD

作者: acerder (阿捷) 2020-04-11 15:52:00

我是用max-width讓圖片自動等比縮放max-width: 85%也試過object-fit: cover幾種讓圖片照原比例縮放的方式都試過了電腦上無論如何拉長拉寬網頁，圖片都正常比例顯示沒問題只有在18:9或19.5:9這樣的手機螢幕上看會被拉長

作者: OKChika (跡卡) 2020-04-12 01:42:00

客戶用的手機瀏覽器是？可以把程式碼放上來看一下嗎？另外我比較習慣img外面包div，img設width:100%、height不設，用div去控制img寬度，例如：左右都加margin。

作者: acerder (阿捷) 2020-04-12 11:41:00

https://ecn.neocities.org/找了免費網頁空間放檔案上去我是只設定max-width，height不設，這樣會照原圖比例縮放客戶用的瀏覽器是chrome

作者: OKChika (跡卡) 2020-04-13 02:08:00

你在img外面那層div的class加一個"items-center"試試看，我加了這個，logo比例就正常了。

作者: acerder (阿捷) 2020-04-13 10:59:00

可以了耶! 感謝OKChika大大的解答!

繼續閱讀

[請益] 哪裡有比較多網站專案可以下載？NadiaArwall [問題] 網頁在某倍率會發生廣告遮住主文？dharma [問題] RDW預覽與手機結果不同...jacka1 [問題] 串接google Oauth問題kanahela [請益] 連菜鳥都不如的入門詢問hwangshan [問題] Wrodpress 首頁出不來phantom78626 [請益] wordpress資安問題ponyufang [問題] 同個網頁網址參數傳遞vincent14 [問題] svg 上顯示測站lucy35 [問題] 用wix做網頁？但網域用中華電信？hiyorisu