У меня есть календарь 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>