作者yulymoon (Yuly)
看板Web_Design
标题[问题] 不同比例图片RWD
时间Tue Nov 15 22:49:44 2016
最近在做的case遇到的一个问题
版面我是用bootstrap 套col-sm-3这样去设定的
今天想要显示出来的图片为1:1的正方形
css方面就直接写max-width:100 height:auto了
问题在於：
如果今天对方上传了一张2:1的长方形的话
依照上面的设定
会变为等宽，高却只有一半的图片
强制设高的话图片会失真，设为background也会失真
通常遇到这种问题大家会选择怎麽做呢?
1.强制使用者上传等比例图
2.撷取图片的一部分改比例为1:1
3.就让它失真
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 122.121.194.117
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1479221388.A.E3A.html
1F：→ miau: 用css把img本体隐藏，另读一份到该区块的background-image 11/15 22:55
2F：→ miau: 再用 background-size: cover 使其填满 11/15 22:56
3F：→ yulymoon: 请问把本体隐藏的用意是为什麽呢? 11/15 23:17
4F：→ miau: 这样才不会显示出来呀～如果是说为何还是要塞个img来隐藏 11/16 00:04
5F：→ miau: 是为了无障碍&比较合乎语意（因为那里本来就该有张图） 11/16 00:05
6F：→ miau: 即使css脱光光那边还是会显示该有的张图片这样 11/16 00:05
7F：→ yulymoon: 感谢 11/16 01:07