PTT數位生活區 / Web_Design

[問題] 設定padding之後圖片無法滿版?

看板Web_Design作者 (小綿羊趕集)時間4年前 (2020/01/31 11:41), 4年前編輯推噓4(4推 0噓 12→)
留言16則, 4人參與, 4年前最新討論串1/1
各位高手~新年快樂 我在練習這個範例的時候遇到這樣的問題 https://codepen.io/willlai/pen/XWJLaWN 問題:如果我希望在右邊的文字上增加上下左右的間距 於是這樣設定 .item-group .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; box-sizing: border-box; } 左邊的圖片在桌機上就無法滿版 (左圖得滿版效果希望是跟灰色的底塊一樣高度,但現在會被PADDING跟文字過多後 撐開底下的高度 ) 請問遇到這樣的問題我該如何解決呢? 感謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 210.242.160.66 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1580442100.A.3BF.html
推
01/31 11:50, 4年前 , 1F
可以更詳細地描述你希望的左圖"滿版"是什麼樣子嗎?
01/31 11:50, 1F
※ 編輯: cgcat (210.242.160.66 臺灣), 01/31/2020 11:55:38
推
01/31 11:57, 4年前 , 2F
最直接的做法是圖片加上height:100% 但會變形
01/31 11:57, 2F
→
01/31 11:58, 4年前 , 3F
你也可以試試object-fit這個屬性, 但要注意在ie上的相容
01/31 11:58, 3F
→
01/31 12:24, 4年前 , 4F
謝謝你~學到了~第一次看到object-fit這個屬性,可惜IE不支援
01/31 12:24, 4F
推
02/01 02:48, 4年前 , 5F
同樓上說的是圖片高度的問題，我建議是一開始圖片尺
02/01 02:48, 5F
→
02/01 02:48, 4年前 , 6F
寸就要先確認再來用RWD才不會跑版。通常設計畫面時
02/01 02:48, 6F
→
02/01 02:48, 4年前 , 7F
候圖就會確認尺寸，切版時也不會碰上這種個問題。但
02/01 02:48, 7F
→
02/01 02:48, 4年前 , 8F
如果以你這個例子，我會有兩種寫法一種是寫在html兩
02/01 02:48, 8F
→
02/01 02:48, 4年前 , 9F
個尺寸的img藏起來一個在斷點時候互換，一種是寫在cs
02/01 02:48, 9F
→
02/01 02:48, 4年前 , 10F
s用背景圖換。
02/01 02:48, 10F
推
02/04 16:09, 4年前 , 11F
我的話，我會把這張圖設為 <div class="item pic"> 的
02/04 16:09, 11F
→
02/04 16:10, 4年前 , 12F
背景圖(裡面就不放img)，設定background-size: cover。
02/04 16:10, 12F
→
02/04 16:10, 4年前 , 13F
在較小的寬度尺寸(變成圖文直式)斷點，設定div的高度，
02/04 16:10, 13F
→
02/04 16:10, 4年前 , 14F
免得背景圖沒有文字在旁邊就顯示不出來。
02/04 16:10, 14F
→
02/04 16:14, 4年前 , 15F
但是要注意圖片裡你想表達的東西是否會被裁切到
02/04 16:14, 15F
→
02/04 16:43, 4年前 , 16F
謝謝以上高手的教學
02/04 16:43, 16F
‣ 更多 cgcat 的文章
文章代碼(AID): #1UCw7qE_ (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 cgcat 的文章
文章代碼(AID): #1UCw7qE_ (Web_Design)