时间戳

首页 > 解决方案 > 如何在具有固定高度的 flex 容器中缩小响应式图像

css - 如何在具有固定高度的 flex 容器中缩小响应式图像

问题描述

我想在一个固定高度的 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。但这也意味着它溢出了它的父级。并且 div 中的两个 div 也track被推到其父母之外。

如何防止图像对于其父 div 太大，以便图像和两个 div 适合父级？

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

编辑：

我的期望是这样的： 在此处输入图像描述 你可以看到浅灰色的容器是我的 flex-container 我想要有我的轨道 div。即使弹性容器的高度发生变化，图像和这两个文本也应该适合。

标签： cssimageflexboxresponsive

解决方案

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

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

这不适用于 flex-container 的每个高度，但在我的情况下是可以的。

推荐阅读