PTT數位生活區 / Web_Design

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

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