作者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/cn.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