背景圖像封面無法按比例縮小圖像

Question

我有一個日歷div（實際上高度和寬度分別設置為100vh和100vw為全屏顯示），其中包含標題和實際日歷。

我使用flex是因為我希望標題具有特定的高度，並且所包含的日歷要占用其剩余的所有垂直空間。

rbc-calendar實際上是我使用的外部庫（React Big Calendar） ，它自己使用flex來縮放行。 我把主要的div CSS放進去，以防它變得有意義。

我希望我的日歷容器具有背景圖像。 因此，僅適用於日歷本身，而不適用於標題。 我希望將此圖像按比例縮小，直到高度（寬度）適合日歷的高度（重量），保持圖像的長寬比，並使其在右/左（頂部/底部）上溢出相同的量。

Background-image: cover似乎是我想要的，但是由於某些原因，圖像根本沒有縮小。

 .calendar { height: 333px; width: 333px; display: flex; flex-direction: column; } .calendar-header { height: 40px; display: flex; justify-content: center; align-items: center; background: lightblue; } .calendar-container { flex: 1; background-size: cover; background: #000 url('https://www.chenhuijing.com/slides/29-constellation-2018/img/meme1.jpg') no-repeat center center; } .rbc-calendar { height: 100%; display: flex; align-items: stretch; } 

 <div class="calendar"> <div class="calendar-header"> <h1>Not working calendar</h1> </div> <div class="calendar-container"> <div class="rbc-calendar"> </div> </div> </div> 

Answer 1

用Temani-afif在問題的評論中回答：在background-size覆蓋該語句之后設置background。