作者xhiang (阿羊羽)
看板Web_Design
標題[問題] CSS 設計問題
時間Fri Dec 4 20:46:17 2015
我有個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://webptt.com/m.aspx?n=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
1F：→ aa06697: width設%不就好了？ 12/04 21:21
2F：→ xhiang: 加在哪呢? 請大大教我一下 謝謝 12/04 21:29
3F：推 aa06697: .a1 裡面 height可以改就是因為他有設定100% （已這個cod 12/04 22:20
4F：→ aa06697: e來講就是視窗高度） 12/04 22:20
大大麻煩你吧那段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
5F：推 lin009: 把外面的 div 設成 12/05 12:09
6F：→ lin009: inline-block ，可以試試看 12/05 12:12
7F：→ lin009: 發現裡面不是 <img> 而是 content XDD 12/05 16:27
8F：→ lin009: 這是為了達到什麼需求, 所以一定要這樣的結構嗎? 12/05 16:28
謝謝兩位大大的指導 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
10F：推 content71: 純css的話，你把img 的 max-width 改成 100vh 就行 12/07 20:36