作者hit1205 (帮你把勇气装满)
看板Blog
标题Re: [Blogger] css 设定图片大小
时间Sun May 4 14:03:40 2014
※ 引述《leomayjeff (lol)》之铭言：
1F：推 wei76422:不过你的问题可以用max-height来让图片不放那麽大04/28 12:55
: height没法用% 这样就得写死高度了...
有一种比较新的办法可以只靠 CSS 做到对应画面宽或高，
但这方法有点太新了 XD... IE 到 11 才开始支援，
Firefox/Chrome 则分别是 19/26 版开始支援
就是使用 vw, vh 这两个单位：
http://jsfiddle.net/dr3T3/
1vw 等於画面 (可见部分) 的 1% 宽度，所以 100vw 就等於画面宽度
100vh 则是画面高度 (数值可以有小数点)
我上面写的这个范例是让宽度最高到 25%
而高度则最大到 25% 的 "画面高度" XD (.test1)
而 .test2 则是没设定最大高度的情形
我用 max-width 而不用 width 是为了避免变形
因为一旦指定了固定的 width 但高度超过 max-height 的话，
图片会直接被压扁 XDDDD
--
═ 风痕影
════════════════════════════
「藤井树，这主意虽好，但是，我喜欢统一，而不是光泉耶！」
══════════════════════ http://hit1205.org ═
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 123.241.214.47
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Blog/M.1399183423.A.629.html
2F：推 wei76422:酷耶!!第一次看见这种写法，不过新浏览器才有支援就..... 05/04 20:35
3F：推 xxxzzz:借用.JS版.改成原PO要的height比较大,width就设成60% 05/04 21:17