PTT
Submit
Submit
選擇語言
正體中文
简体中文
PTT
Web_Design
[問題] 不同比例圖片RWD
作者:
yulymoon
(Yuly)
2016-11-15 22:49:44
最近在做的case遇到的一個問題
版面我是用bootstrap 套col-sm-3這樣去設定的
今天想要顯示出來的圖片為1:1的正方形
css方面就直接寫max-width:100 height:auto了
問題在於:
如果今天對方上傳了一張2:1的長方形的話
依照上面的設定
會變為等寬,高卻只有一半的圖片
強制設高的話圖片會失真,設為background也會失真
通常遇到這種問題大家會選擇怎麼做呢?
1.強制使用者上傳等比例圖
2.擷取圖片的一部分改比例為1:1
3.就讓它失真
作者:
miau
(米奧)
2016-11-15 22:55:00
用css把img本體隱藏,另讀一份到該區塊的background-image再用 background-size: cover 使其填滿
作者:
yulymoon
(Yuly)
2016-11-15 23:17:00
請問把本體隱藏的用意是為什麼呢?
作者:
miau
(米奧)
2016-11-16 00:04:00
這樣才不會顯示出來呀~如果是說為何還是要塞個img來隱藏是為了無障礙&比較合乎語意(因為那裡本來就該有張圖)即使css脫光光那邊還是會顯示該有的張圖片這樣
作者:
yulymoon
(Yuly)
2016-11-16 01:07:00
感謝
繼續閱讀
[問題] Change Colors遮蔽網頁的圖片
dharma
[售書] (售出)PHP5 & MySQL 程式設計 第二版
herbacin
[請益] 使用javascript 如何儲存XML檔?或?
agevinx
[問題]ie出現[此網站的安全性憑證有問題]
pelin283
[售書] 售Visual .NET 專業書籍
herbacin
[問題] CSS padding與margin的問題
lueichun
[問題] 能讓網頁不隨手機橫放而調整嗎?
virgin7
[問題] <img> 引用外部 url 的安全性問題
Neisseria
[問題] 必填欄位
MAGICXX
[售書] PHP SMARTY樣版引擎
herbacin
Links
booklink
Contact Us: admin [ a t ] ucptt.com