[問題] 關於一個圖片排版的問題

[YoyaKazuma (喰)]

這裡想請教一個關於圖片排版的問題

就是我有三張圖片且寬高各自都不同

而我希望把這三張圖片擺在同一行

並且塞滿版面寬度 , 又剛好每張圖片都一樣高

舉例：

　譬如說整張網頁寬度 800px ，就會自動調整三張圖片的比例

　最後每張圖片的高度會一樣，且三張圖片的寬度加起來為 800px

  ( 且當網頁寬度調整時每張圖片的比例也要能隨之自動縮放 )

請問這樣有辦法只用 CSS 實做嗎？

我的理解應該是得用到 JavaScript 才有辦法

=

會這樣問是因為公司網站包給國外寫的 CMS 效能不是很好

所以老闆希望盡量不要放 JavaScript 上去 , 常常會卡住...

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.160.201.23
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1478099007.A.6ED.html
推 ymcheung: Flexbox 或 display: table 吧？
因為有些客戶還在用 IE8 所以可能沒辦法用 flexbox

display:table 之前有想過但是沒有想到要怎麼自動調整寬高

推 youtuuube000: 用float加上div應該也可以(?
float 的話我想不出來跟圖片縮放的關聯耶 , 請問可以給個範例嗎? @@

→ wyler: 先用ps排一下 抓圖片的寬度%數?? 還是這三張可以後台更換
→ wyler: 的圖片呢
→ xdraculax: 圖片固定的話先設好%數接近，高度再vw+overflow:hide
→ xdraculax: 切一點點掉，如果圖片能換，只能用 js 了 (js 是能佔多
→ xdraculax: 少效能 @@)
→ xdraculax: overflow:hide也可以改用背景+cover
圖片是固定的 , 所以看來先算各自的百分比再依寬度調整似乎是唯一解了...？

推 Ayukawayen: 圖片固定就先用小畫家合成一張然後width:100%結束(?
圖片不能修改 , 不然要給 Legal 重審XD

推 minm:  Background-size: cover
background-size 也是之前有想過但是沒有想到要怎麼自動調整高度
※ 編輯: YoyaKazuma (118.163.140.1), 11/03/2016 14:36:53
推 aceone: 自動高度搭配cover就是 height:100% width:auto
推 kawaii98: 我想到了，可以試看看width:cale(100%/3);