作者YoyaKazuma (喰)
看板Web_Design
標題[問題] 關於一個圖片排版的問題
時間Wed Nov 2 23:03:24 2016
這裡想請教一個關於圖片排版的問題
就是我有三張圖片且寬高各自都不同
而我希望把這三張圖片擺在同一行
並且塞滿版面寬度 , 又剛好每張圖片都一樣高
舉例：
譬如說整張網頁寬度 800px ，就會自動調整三張圖片的比例
最後每張圖片的高度會一樣，且三張圖片的寬度加起來為 800px
( 且當網頁寬度調整時每張圖片的比例也要能隨之自動縮放 )
請問這樣有辦法只用 CSS 實做嗎？
我的理解應該是得用到 JavaScript 才有辦法
=
會這樣問是因為公司網站包給國外寫的 CMS 效能不是很好
所以老闆希望盡量不要放 JavaScript 上去 , 常常會卡住...
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.160.201.23
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1478099007.A.6ED.html
1F：推 ymcheung: Flexbox 或 display: table 吧？ 11/02 23:10
因為有些客戶還在用 IE8 所以可能沒辦法用 flexbox
display:table 之前有想過但是沒有想到要怎麼自動調整寬高
2F：推 youtuuube000: 用float加上div應該也可以(? 11/02 23:13
float 的話我想不出來跟圖片縮放的關聯耶 , 請問可以給個範例嗎? @@
3F：→ wyler: 先用ps排一下 抓圖片的寬度%數?? 還是這三張可以後台更換 11/03 05:36
4F：→ wyler: 的圖片呢 11/03 05:36
5F：→ xdraculax: 圖片固定的話先設好%數接近，高度再vw+overflow:hide 11/03 09:14
6F：→ xdraculax: 切一點點掉，如果圖片能換，只能用 js 了 (js 是能佔多 11/03 09:14
7F：→ xdraculax: 少效能 @@) 11/03 09:14
8F：→ xdraculax: overflow:hide也可以改用背景+cover 11/03 09:20
圖片是固定的 , 所以看來先算各自的百分比再依寬度調整似乎是唯一解了...？
9F：推 Ayukawayen: 圖片固定就先用小畫家合成一張然後width:100%結束(? 11/03 10:56
圖片不能修改 , 不然要給 Legal 重審XD
10F：推 minm: Background-size: cover 11/03 11:07
background-size 也是之前有想過但是沒有想到要怎麼自動調整高度
※ 編輯: YoyaKazuma (118.163.140.1), 11/03/2016 14:36:53
11F：推 aceone: 自動高度搭配cover就是 height:100% width:auto 11/06 03:34
12F：推 kawaii98: 我想到了，可以試看看width:cale(100%/3); 11/17 23:46