代码之家 › 专栏 › 技术社区 › Kishlin

背景图像封面无法缩小图像

background-image css3 css html

0

Kishlin · 技术社区 · 6 年前

我有一个日历div(实际高度和宽度设置为100vh,100vw为全屏),包含一个标题和一个实际的日历。

我使用flex是因为我希望页眉有一个特定的高度,并且包含的日历要占据它剩下的所有垂直空间。

RBC日历实际上是我使用的外部库 (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>

1 回复 | 直到 6 年前

1

0

Kishlin 6 年前

对问题评论的回答 Temani-afif :设置后面的背景 background-size 重写语句。