[問題] 如何讓大小不一的圖片在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