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之后设置背景会覆盖该陈述。

背景图像封面无法按比例缩小图像

1 个答案: