[问题] 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