作者cgcat (小綿羊趕集)
看板Web_Design
標題[問題] 設定padding之後圖片無法滿版?
時間Fri Jan 31 11:41:37 2020
各位高手~新年快樂
我在練習這個範例的時候遇到這樣的問題
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1580442100.A.3BF.html
1F：推 nick8195: 可以更詳細地描述你希望的左圖"滿版"是什麼樣子嗎? 01/31 11:50
※ 編輯: cgcat (210.242.160.66 臺灣), 01/31/2020 11:55:38
2F：推 nick8195: 最直接的做法是圖片加上height:100% 但會變形 01/31 11:57
3F：→ nick8195: 你也可以試試object-fit這個屬性, 但要注意在ie上的相容 01/31 11:58
4F：→ cgcat: 謝謝你~學到了~第一次看到object-fit這個屬性,可惜IE不支援 01/31 12:24
5F：推 pandaz79418: 同樓上說的是圖片高度的問題，我建議是一開始圖片尺 02/01 02:48
6F：→ pandaz79418: 寸就要先確認再來用RWD才不會跑版。通常設計畫面時 02/01 02:48
7F：→ pandaz79418: 候圖就會確認尺寸，切版時也不會碰上這種個問題。但 02/01 02:48
8F：→ pandaz79418: 如果以你這個例子，我會有兩種寫法一種是寫在html兩 02/01 02:48
9F：→ pandaz79418: 個尺寸的img藏起來一個在斷點時候互換，一種是寫在cs 02/01 02:48
10F：→ pandaz79418: s用背景圖換。 02/01 02:48
11F：推 OKChika: 我的話，我會把這張圖設為 <div class="item pic"> 的 02/04 16:09
12F：→ OKChika: 背景圖(裡面就不放img)，設定background-size: cover。 02/04 16:10
13F：→ OKChika: 在較小的寬度尺寸(變成圖文直式)斷點，設定div的高度， 02/04 16:10
14F：→ OKChika: 免得背景圖沒有文字在旁邊就顯示不出來。 02/04 16:10
15F：→ OKChika: 但是要注意圖片裡你想表達的東西是否會被裁切到 02/04 16:14
16F：→ cgcat: 謝謝以上高手的教學 02/04 16:43