背景图像封面不会缩小图像

Question

我有一个日历div（实际上高度和宽度设置为100vh，100vw是全屏），包含标题和实际日历。

我使用flex是因为我希望标题具有特定的高度，并且包含日历以获取它留下的所有垂直空间。

rbc-calendar实际上是一个外部库，我使用(React Big Calendar)，它自己使用flex来缩放行。我把主要的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之后设置背景优先于声明。