Div的身高不足

Question

我有一个具有背景图片属性的div。希望div的宽度至少为240px，但如果有可用空间，则应适合屏幕。我想保持该比例，因此我将height属性设置为auto，但在某些情况下仍会裁切图像。我不是CSS方面的专家，因此不胜感激。谢谢。

<div class = "event">
  <div class="event-image"></div>
  <a href = "#learnmore" class = "learn-more">Corporate Event</a>
</div> 

.event {
  border: 1px solid grey;
  border-radius: 4px;
  min-width: 240px;
  min-height: 400px;
  width: 100%;
  height: auto;
}

.event-image {
  background: url('event.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 240px;
  min-height: 200px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}