如何在固定高度的Flex容器中缩小响应图像

Question

我想在固定高度的flexbox容器中显示一些包含图像的div和两个包含文本的div。 这些div代表曲目，并带有专辑封面，歌曲名称和艺术家名称。

赞：

<div class="flex-container">
  <div class="track">
    <img class="track--image" src="http://lorempixel.com/400/400/">
    <div class="track--artist-name">Artist</div>
    <div class="track--track-name">Song</div>
  </div>
  <div class="track">
   .
   .
   .
</div>

CSS：

.flex-container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: lightblue;
}

.track {
  border: 1px solid black;
  text-align: center;
  max-width: 9rem;
  color: black;
}

.track--image {
  width: 100%;
  border-radius: 50%;
}

.track--name,
.track--artist-name {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

问题在于图像的宽度为100％，以适合其父div。但这也意味着它会溢出其父对象。并且track div中的两个div也被推到其父级之外。

如何防止图像对于其父div太大，以使图像和两个div都适合父内部？

我还准备了一个Codepen以更好地描述问题：https://codepen.io/anon/pen/YBQGRb

编辑：

我的期望看起来像这样： 如您所见，浅灰色的容器是我的柔韧性容器，我想拥有自己的轨道div。即使flex容器的高度发生变化，图像和这两个文本也应适合其中。

Answer 1

在.flex-container中将高度切换为自动是否会给您所需的结果，

.flex-container {
  display: flex;
  width: 100%;
  height: auto;
  background-color: lightblue;
}

评论后

我下面要做的就是在跟踪容器中添加少量填充，以使图像脱离顶部边框，并通过控制宽度迫使图像适合于液体容器。

.track .track--image {
  width: 35%;
  height: auto;
  border-radius: 50%;
}

.track {
  border: 1px solid black;
  padding: 5px;
  text-align: center;
  max-width: 9rem;
  color: black;
}

Answer 2

如果您像这样编辑图像类，它将起作用。

.track {
  border: 1px solid black;
  text-align: center;
  width: 9rem;
  color: black;

  .track--image {
    border-radius: 50%;
    height:100%;
  }
}  

https://codepen.io/anon/pen/XOadGO

Answer 3

我现在这样解决了我的问题：

.track--image {
  height: 66%;
  border-radius: 50%;
}

这不适用于弹性容器的每个高度，但就我而言是可以的。