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

[cgcat (小綿羊趕集)]

各位高手~新年快樂


我在練習這個範例的時候遇到這樣的問題
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
推 nick8195: 可以更詳細地描述你希望的左圖"滿版"是什麼樣子嗎?
※ 編輯: cgcat (210.242.160.66 臺灣), 01/31/2020 11:55:38
推 nick8195: 最直接的做法是圖片加上height:100% 但會變形
→ nick8195: 你也可以試試object-fit這個屬性, 但要注意在ie上的相容
→ cgcat: 謝謝你~學到了~第一次看到object-fit這個屬性,可惜IE不支援
推 pandaz79418: 同樓上說的是圖片高度的問題，我建議是一開始圖片尺
→ pandaz79418: 寸就要先確認再來用RWD才不會跑版。通常設計畫面時
→ pandaz79418: 候圖就會確認尺寸，切版時也不會碰上這種個問題。但
→ pandaz79418: 如果以你這個例子，我會有兩種寫法一種是寫在html兩
→ pandaz79418: 個尺寸的img藏起來一個在斷點時候互換，一種是寫在cs
→ pandaz79418: s用背景圖換。
推 OKChika: 我的話，我會把這張圖設為 <div class="item pic"> 的
→ OKChika: 背景圖(裡面就不放img)，設定background-size: cover。
→ OKChika: 在較小的寬度尺寸(變成圖文直式)斷點，設定div的高度，
→ OKChika: 免得背景圖沒有文字在旁邊就顯示不出來。
→ OKChika: 但是要注意圖片裡你想表達的東西是否會被裁切到
→ cgcat: 謝謝以上高手的教學