[問題] 如何讓大小不一的圖片在DIV內置中?消失

看板Web_Design作者時間7年前 (2016/10/24 23:38), 7年前編輯推噓6(6推 0噓 4→)
留言10則, 5人參與, 最新討論串1/1
目前正在調整自己的作品網站， 因為非專職網頁設計所以為了這個小問題卡關好幾天還是無解， 只好上來求問。 是這樣的，目前是在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外掛那樣可以漂亮的滿版置中... -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.234.179.22 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1477323530.A.338.html
推
10/25 08:28, , 1F
有sample就看他code學習一下呀
10/25 08:28, 1F
其實有試過了，但講白就是看不懂js的結構....Orz 有的是外連的code，就算追到源頭也不知道該怎麼拆解... 還是比較想知道有沒有單純用css就可以搞定的方式？ 有在網路上找到好像可以用before/after作假設範圍的方式， 但是我看不太懂試了也不行..... ※ 編輯: autumoon (36.234.179.22), 10/25/2016 13:15:00
推
10/25 14:01, , 2F
table和table-cell, text-align:center; vertical-align:
10/25 14:01, 2F
→
10/25 14:01, , 3F
middle;
10/25 14:01, 3F
→
10/25 14:03, , 4F
table和table-cell是display屬性。外面div用table,裡面im
10/25 14:03, 4F
→
10/25 14:03, , 5F
g 用table-cell
10/25 14:03, 5F
推
10/25 14:05, , 6F
img的width記得設100% height auto 或100%
10/25 14:05, 6F
感謝，大概懂圖片置中的方式了。 但是新的問題是沒辦法判斷以高或寬為主來做為滿版基準.... 會全部壓成正方形的各種扁圖... 這樣的判斷式我找了一下大概有下面這種做法 http://css-truesun.blogspot.tw/2011/07/css.html 不過套上去之後好像沒反應..... ※ 編輯: autumoon (36.234.179.22), 10/25/2016 16:40:40
推
10/26 23:24, , 7F
用 background-size: cover ; 是你要的效果嗎？
10/26 23:24, 7F
基本上就是要那樣的效果， 但是我不知道怎麼把blogger的first-image函數漂亮的套在我的版型裡...Orz ※ 編輯: autumoon (36.235.44.68), 10/29/2016 05:07:48
推
10/30 19:05, , 8F
用 flex-box排版?
10/30 19:05, 8F
推
10/31 12:31, , 9F
圖的大小>DIV大小，然後圖片的中央剛好定在DIV的中央?
10/31 12:31, 9F
→
10/31 12:31, , 10F
這樣可能需要用JS或Jquery去寫
10/31 12:31, 10F
‣ 更多 autumoon 的文章
文章代碼(AID): #1O3YiACu (Web_Design)