如何使包含绝对定位的孩子的相对定位的父母具有“灵活”的身高？

Question

<img>（孩子）绝对居中于.carousel（父母）。但是，对于响应行为，我希望.carousel（父级）具有相对于屏幕大小和/或相对于最高<img>的高度。同样，<img>高度将根据屏幕宽度而变化。

.carousel {
  background: #dfe2e4;
  background: url(../images/bg/port-bg.png) no-repeat top center;
  background-size: contain;
  margin: 4px;
  min-height: 221px;
  position: relative;
}

.carousel img {
  margin: auto;
  width: 100%;
  /* 'Absolute' centering. */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

我认为我们可以将它与JS一起使用，但是使用JS进行样式会让我感到畏缩。