PTT數位生活區 / Web_Design

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

看板Web_Design作者 (阿捷)時間4年前 (2020/04/10 12:18), 編輯推噓4(4推 0噓 16→)
留言20則, 5人參與, 4年前最新討論串1/1
想請問版上的各位高手， 最近接了一個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
→
04/10 12:48, 4年前 , 1F
可以啊
04/10 12:48, 1F
→
04/10 13:26, 4年前 , 2F
可以啊
04/10 13:26, 2F
推
04/10 22:38, 4年前 , 3F
可以啊 不過我想先知道你的width跟height怎麼設定
04/10 22:38, 3F
→
04/11 01:30, 4年前 , 4F
美工 XD
04/11 01:30, 4F
→
04/11 15:52, 4年前 , 5F
我是用max-width讓圖片自動等比縮放
04/11 15:52, 5F
→
04/11 15:53, 4年前 , 6F
max-width: 85%
04/11 15:53, 6F
→
04/11 15:54, 4年前 , 7F
也試過object-fit: cover
04/11 15:54, 7F
→
04/11 15:55, 4年前 , 8F
幾種讓圖片照原比例縮放的方式都試過了
04/11 15:55, 8F
→
04/11 15:57, 4年前 , 9F
電腦上無論如何拉長拉寬網頁，圖片都正常比例顯示沒問題
04/11 15:57, 9F
→
04/11 15:58, 4年前 , 10F
只有在18:9或19.5:9這樣的手機螢幕上看會被拉長
04/11 15:58, 10F
推
04/12 01:42, 4年前 , 11F
客戶用的手機瀏覽器是？可以把程式碼放上來看一下嗎？
04/12 01:42, 11F
推
04/12 01:49, 4年前 , 12F
另外我比較習慣img外面包div，img設width:100%、height
04/12 01:49, 12F
→
04/12 01:49, 4年前 , 13F
不設，用div去控制img寬度，例如：左右都加margin。
04/12 01:49, 13F
→
04/12 11:41, 4年前 , 14F
04/12 11:41, 14F
→
04/12 11:42, 4年前 , 15F
找了免費網頁空間放檔案上去
04/12 11:42, 15F
→
04/12 11:44, 4年前 , 16F
我是只設定max-width，height不設，這樣會照原圖比例縮放
04/12 11:44, 16F
→
04/12 11:46, 4年前 , 17F
客戶用的瀏覽器是chrome
04/12 11:46, 17F
推
04/13 02:08, 4年前 , 18F
你在img外面那層div的class加一個"items-center"試試看
04/13 02:08, 18F
→
04/13 02:08, 4年前 , 19F
，我加了這個，logo比例就正常了。
04/13 02:08, 19F
→
04/13 10:59, 4年前 , 20F
可以了耶! 感謝OKChika大大的解答!
04/13 10:59, 20F
‣ 更多 acerder 的文章
文章代碼(AID): #1UZ_EFB1 (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 acerder 的文章
文章代碼(AID): #1UZ_EFB1 (Web_Design)