各位高手~新年快樂
我在練習這個範例的時候遇到這樣的問題
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跟文字過多後
撐開底下的高度
)
請問遇到這樣的問題我該如何解決呢?
感謝

可以更詳細地描述你希望的左圖"滿版"是什麼樣子嗎?最直接的做法是圖片加上height:100% 但會變形你也可以試試object-fit這個屬性, 但要注意在ie上的相容

謝謝你~學到了~第一次看到object-fit這個屬性,可惜IE不支援

同樓上說的是圖片高度的問題，我建議是一開始圖片尺寸就要先確認再來用RWD才不會跑版。通常設計畫面時候圖就會確認尺寸，切版時也不會碰上這種個問題。但如果以你這個例子，我會有兩種寫法一種是寫在html兩個尺寸的img藏起來一個在斷點時候互換，一種是寫在css用背景圖換。

我的話，我會把這張圖設為 <div class="item pic"> 的背景圖(裡面就不放img)，設定background-size: cover。在較小的寬度尺寸(變成圖文直式)斷點，設定div的高度，免得背景圖沒有文字在旁邊就顯示不出來。但是要注意圖片裡你想表達的東西是否會被裁切到

謝謝以上高手的教學