[問題] CSS 設計問題

[xhiang (阿羊羽)]

我有個CSS 問題想請教各位大大
下面這範例視窗高度改變的時候,圖片會跟著變小
可是 .a1 的 div width並不會跟著改變
有沒有辦法div 也跟著 img 的 width 一起改變呢?
謝大家


範例在這
請大家查看

謝謝

https://goo.gl/LUFeLH



圖1
https://goo.gl/ZGxa85
圖2
https://goo.gl/CnrEOc

圖3
https://goo.gl/ZC3jJE
圖4
https://goo.gl/OItd7U


圖1 圖2 div img 寬高都一致

將視窗高度縮小
圖3 img width height 都已經縮小了

圖4 div height 縮小了, width 還是原本的寬不會變

我想讓圖等比例縮小後, 外層DIV 寬高也跟著變化

謝謝各位大大


發信站: 批踢踢實業坊(ptt.cc), 來自: 114.46.29.72
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1449233179.A.B46.html
※ 編輯: xhiang (114.46.29.72), 12/04/2015 20:52:36
※ 編輯: xhiang (114.46.29.72), 12/04/2015 20:59:56
→ aa06697: width設%不就好了？
→ xhiang: 加在哪呢? 請大大教我一下 謝謝
推 aa06697: .a1 裡面 height可以改就是因為他有設定100% （已這個cod
→ aa06697: e來講就是視窗高度）
大大麻煩你吧那段code下載回去試試看,
我要外面的 div 跟著img裡面的寬高來變化;
現在視窗 ""高 height""縮小的時候img 寬 高 會跟著變, div的高也會動
可是DIV的""寬 width""卡在那裏不會動
您可以用chrome F12 下去看一下情況!!!
謝謝你
※ 編輯: xhiang (114.46.29.72), 12/04/2015 22:49:30
※ 編輯: xhiang (114.46.29.72), 12/04/2015 23:01:41
推 lin009: 把外面的 div 設成
→ lin009: inline-block ，可以試試看
→ lin009: 發現裡面不是 <img> 而是 content XDD
→ lin009: 這是為了達到什麼需求, 所以一定要這樣的結構嗎?
→ lin009: try this: https://output.jsbin.com/bozahefalu
謝謝兩位大大的指導 XD

結構不一定要這樣
我說說我想要的東西好了!!! 有空的大大可以在指導我一下!!!

我想要的東西
像iphone 按下 home 鍵跳出來的那memu

1. 會擺在畫面居中的位置
2. 螢幕翻轉［圖］會等比例縮放
3. ［圖］上面［九宮格］，也就是最多能放九個按鈕。(這九個按鈕當然會跟著圖縮放

click 的事件我自己會透過JS下去寫!!!
其餘的 layout 的部份我想透過CSS來達成!!!

其實透過JS控制div寬高這方式法我已經有達成我要的東西!!
只是想更進一步的學習CSS
不知道我的想法有沒有不切實際!!! XD

在請各位大大指教

謝謝

※ 編輯: xhiang (114.46.19.203), 12/05/2015 17:58:49
推 content71: 純css的話，你把img 的 max-width 改成 100vh 就行
→ content71: vh 的使用支援 http://caniuse.com/#search=vh