html - div没有足够的高度

Question

我有一个具有背景图像属性的 div。希望 div 的宽度至少为 240 像素，但如果空间可用，则应适合屏幕。我想保持比例，所以我将 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;
}

标签： htmlcss