我有幾個列,我使用flex給出相等的寬度。每個都包含img標簽,我希望這些圖像能夠展示object-fit: cover尺寸。.container { display: flex; flex-direction: row; width: 100%;}.test { flex: 1; margin-right: 1rem; overflow: hidden; height: 400px;}img { object-fit: cover;}<div class="container"> <div class="test"><img src="http://placehold.it/1920x1080"></div> <div class="test"><img src="http://placehold.it/1920x1080"></div> <div class="test"><img src="http://placehold.it/1920x1080"></div> <div class="test"><img src="http://placehold.it/1920x1080"></div></div>圖像沒有調整大小,如本演示中所示。這是為什么?
3 回答

MYYA
TA貢獻1868條經驗 獲得超4個贊
對于那些不能只是“廢棄容器并將圖像自己作為彈性項目”的人來說,只需添加容器級別:
<div class="display-flex">
<div class="flex-grow position-relative">
<div class="pos-absolute top-left-right-bottom-0">
<img class="object-fit-cover height-width-100">
- 3 回答
- 0 關注
- 594 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消