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

Posted 2023-03-06

【中文标题】如何在具有固定高度的 flex 容器中缩小响应式图像

【英文标题】：How to shrink a responsive image within a flex container with fixed height

【发布时间】：2019-06-27 16:50:24

【问题描述】：

我想在一个固定高度的 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

编辑：

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

【问题讨论】：

在.track .track--image 中使用height: 100% 代替width: 100% 怎么样？

然后图像适合其父级，但两个 div .track--artist-name 和 .track--name 溢出它。

【参考方案1】：

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

.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

【参考方案2】：

在您的 .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;

【讨论】：

不幸的是，约束是弹性容器具有固定的高度。在我的示例中，为简单起见，固定像素值。它将嵌入到导致固定高度的网格布局中......

这种情况下你能增加固定高度吗？

【参考方案3】：

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

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

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