[问题] 如何让大小不一的图片在DIV内置中?

楼主: autumoon (青山 暁)   2016-10-24 23:38:46
目前正在调整自己的作品网站,
因为非专职网页设计所以为了这个小问题卡关好几天还是无解,
只好上来求问。
是这样的,目前是在blogger架站,
因为懒得回头一篇篇改文章图,又想做个first image清单,
所以目前的想法是叫出first-image用个div包起来好置中。
可是网络上查了很多方式,都是当图片小于div时的置中法,
因为first-image没有统一的大小,就算可以放入统一尺寸的div内也会有空白出现。
但我想要的是满版置中的效果。
虽然知道可以用div背景的方式来做是最快的,
但是就算直接在blogger的原始码内套div style来抓first-image也毫无反应。
后来有找到下面的网站有教使用jquery来做置中,
http://www.astralweb.com.tw/full-screen-backround-image/
不过实际使用之后不知道为什么好像还是会有没满版的问题,
而且置中也是长或宽的其中一边...
因为不是很懂JS类的程式码所以自己试着改也是徒劳无功....
只好上来问看看有没有什么好方法可以像一些blogger外挂那样可以漂亮的满版置中...
作者: CauseSam (天翼)   2016-10-25 08:28:00
有sample就看他code学习一下呀
作者: s06yji3 (阿南)   2016-10-25 14:01:00
table和table-cell, text-align:center; vertical-align:middle;table和table-cell是display属性。外面div用table,里面img 用table-cellimg的width记得设100% height auto 或100%
作者: ha100 (有件大事一直没讲)   2016-10-26 23:24:00
用 background-size: cover ; 是你要的效果吗?
作者: tw0517tw (无冬夜)   2016-10-30 19:05:00
用 flex-box排版?
作者: hooy2013 (gogo)   2016-10-31 12:31:00
图的大小>DIV大小,然后图片的中央刚好定在DIV的中央?这样可能需要用JS或Jquery去写

Links booklink

Contact Us: admin [ a t ] ucptt.com