如何用HTML/Tailwind实现自适应可变行高图片网格？

纯CSS方案（基础自适应，无严格行高阈值） #

若无需严格限制行高阈值，仅要求每行图片铺满屏幕宽度、各行高度独立适配，可通过CSS Grid结合aspect-ratio与object-fit实现：

.image-grid {
  display: grid;
  /* 自动填充列，minmax第一个值为单图最小宽度，可按需调整 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px; /* 可选，设置图片间距 */
}

.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
  /* 若需完整显示图片，可替换为 object-fit: contain; */
}

该方案会根据屏幕宽度自动调整每行图片数量，每行高度由该行内图片的尺寸/比例决定，确保整行铺满屏幕宽度。

CSS+JS方案（精准控制行高阈值） #

若需要严格控制行高超出/低于阈值时自动换行，需结合JavaScript动态计算布局，核心逻辑是根据图片比例与屏幕宽度，逐行判断是否拆分图片，确保行高在设定范围内：

HTML #

<div class="image-grid" id="imageGrid">
  <img src="img1.jpg" alt="" data-width="800" data-height="600">
  <img src="img2.jpg" alt="" data-width="1200" data-height="800">
  <img src="img3.jpg" alt="" data-width="600" data-height="900">
  <!-- 更多图片 -->
</div>

CSS #

.image-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.image-grid img {
  flex-shrink: 0;
  object-fit: cover;
}

JavaScript #

const grid = document.getElementById('imageGrid');
const images = Array.from(grid.querySelectorAll('img'));
const rowHeightMin = 200; // 最小行高阈值
const rowHeightMax = 300; // 最大行高阈值
const gap = 8; // 需与CSS中的gap值一致

function layoutImages() {
  const containerWidth = grid.offsetWidth;
  let currentRow = [];
  let totalRatio = 0;

  // 重置图片样式
  images.forEach(img => {
    img.style.width = '';
    img.style.height = '';
  });

  images.forEach(img => {
    const ratio = parseInt(img.dataset.width) / parseInt(img.dataset.height);
    currentRow.push({ img, ratio });
    totalRatio += ratio;

    // 计算当前行预估高度
    const estimatedHeight = (containerWidth - (currentRow.length - 1) * gap) / totalRatio;

    // 若预估高度超出最大值，将当前图片移至下一行
    if (estimatedHeight > rowHeightMax && currentRow.length > 1) {
      const lastItem = currentRow.pop();
      totalRatio -= lastItem.ratio;
      renderRow(currentRow, containerWidth);
      currentRow = [lastItem];
      totalRatio = lastItem.ratio;
    }
  });

  // 渲染最后一行
  currentRow.length > 0 && renderRow(currentRow, containerWidth);
}

function renderRow(row, containerWidth) {
  const totalRatio = row.reduce((sum, item) => sum + item.ratio, 0);
  const availableWidth = containerWidth - (row.length - 1) * gap;
  // 确保行高不低于最小阈值
  let rowHeight = availableWidth / totalRatio;
  rowHeight = rowHeight < rowHeightMin ? rowHeightMin : rowHeight;

  row.forEach(item => {
    const imgWidth = rowHeight * item.ratio;
    item.img.style.width = `${imgWidth}px`;
    item.img.style.height = `${rowHeight}px`;
  });
}

// 初始渲染
layoutImages();
// 监听窗口尺寸变化，重新布局
window.addEventListener('resize', layoutImages);

关键注意点 #

• 需通过data-width/data-height预先提供图片宽高比，或在图片加载完成后通过img.naturalWidth/img.naturalHeight获取真实尺寸
• 可根据需求调整rowHeightMin、rowHeightMax及gap参数
• 若使用图片懒加载，需在图片加载完成后重新调用layoutImages()

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