如何在固定高度的 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 适合父图像？

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

编辑：

我的期望是这样的：如您所见，浅灰色容器是我的弹性容器，我想在其中放置轨道 divs。即使 flex-container 的高度发生变化，图像和这两个文本也应该适合。

Answer 1

在您的 .flex-container 中将高度切换为 auto 是否能达到您想要的结果，

.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

如果你像这样编辑你的图片class它就可以了。

.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%;
}

这不适用于弹性容器的每个高度，但在我的情况下没问题。

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

How to shrink a responsive image within a flex container with fixed height

css

image

flexbox

responsive