[問題] 不同比例圖片RWD

[yulymoon (Yuly)]

最近在做的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://www.ptt.cc/bbs/Web_Design/M.1479221388.A.E3A.html
→ miau: 用css把img本體隱藏，另讀一份到該區塊的background-image
→ miau: 再用 background-size: cover 使其填滿
→ yulymoon: 請問把本體隱藏的用意是為什麼呢?
→ miau: 這樣才不會顯示出來呀～如果是說為何還是要塞個img來隱藏
→ miau: 是為了無障礙&比較合乎語意（因為那裡本來就該有張圖）
→ miau: 即使css脫光光那邊還是會顯示該有的張圖片這樣
→ yulymoon: 感謝