作者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/cn.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