如何实现自适应高度图片卡片：支持最大宽高、圆角及响应式收缩

完整代码实现 #

HTML

<div class="card">
  <img src="your-image-url.jpg" alt="Card visual" class="card-image">
  <div class="card-content">
    <h3 class="card-title">动态加载标题</h3>
    <p class="card-text">这里是长度不确定的动态文本内容，需要自动换行以适应容器宽度。</p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.card-image {
  flex: 1 1 auto;
  object-fit: contain;
  width: 100%;
  background-color: #f5f5f5;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card-content {
  flex: 0 0 auto;
  padding: 16px;
  width: 100%;
}

.card-title {
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.card-text {
  line-height: 1.5;
  word-wrap: break-word;
}

/* 垂直空间不足时的降级样式 */
@media (max-height: 400px) {
  .card-content {
    display: none;
  }
  .card-image {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}

关键实现细节 #

1. 定位与自适应容器

   • 用fixed定位结合left: 50% + transform: translateX(-50%)实现水平居中，垂直置顶。
   • max-width: 90vw和max-height: 100vh限制卡片最大尺寸，确保不超出视口范围。
   • flex-direction: column让图片与文本容器垂直排列，自动分配空间。

2. 图片比例保持与自适应收缩

   • flex: 1 1 auto让图片占据卡片内剩余垂直空间，同时允许空间不足时自动收缩。
   • object-fit: contain保证图片始终保持原始宽高比，不会拉伸或变形。
   • 给图片设置背景色，优化加载前的视觉体验。

3. 动态文本处理

   • card-content设置flex: 0 0 auto，确保文本容器仅占用自身内容所需高度，不会挤压图片空间。
   • word-wrap: break-word实现长文本自动换行，避免横向溢出。

4. 空间不足时的降级处理

   • 通过媒体查询@media (max-height: 400px)（阈值可按需调整），在垂直空间不足时隐藏文本容器。
   • 同时给图片添加底部圆角，保证卡片圆角样式的完整性。

进阶：JavaScript动态适配（可选） #

如果需要更精确的空间判断（比如根据卡片实际内容高度而非固定视口高度），可以用JS监听窗口 resize 事件动态调整：

function adjustCardLayout() {
  const card = document.querySelector('.card');
  const image = card.querySelector('.card-image');
  const content = card.querySelector('.card-content');
  
  // 计算图片应占的最小高度（基于原始比例）
  const imageAspectRatio = image.naturalWidth / image.naturalHeight;
  const requiredImageHeight = card.offsetWidth / imageAspectRatio;
  
  // 当卡片剩余空间不足以容纳图片+文本时，隐藏文本
  if (card.offsetHeight - content.offsetHeight < requiredImageHeight) {
    content.style.display = 'none';
    image.style.borderBottomLeftRadius = '12px';
    image.style.borderBottomRightRadius = '12px';
  } else {
    content.style.display = 'block';
    image.style.borderBottomLeftRadius = '0';
    image.style.borderBottomRightRadius = '0';
  }
}

// 初始化与窗口 resize 时触发
window.addEventListener('load', adjustCardLayout);
window.addEventListener('resize', adjustCardLayout);

内容的提问来源于stack exchange，提问作者Felix Olszewski