inline-block图片自适应缩放问题：min/max-height设置无效

• 实现inline-block布局，要求未填满的行在父容器内居中
• 窗口resize时，容器内图片自动缩放，保持左右外边距固定（如5vw）
• 宽度足够容纳最小宽度的图片时，自动增加列数并将图片设为最小宽度；继续加宽则缩放图片以维持边距
• 当前存在的问题：
  • 原代码图片尺寸固定，使用min/max-height时图片被拉伸裁剪，且无法正常换行
  • 修改tile的width为auto后，图片无法按比例缩放，也不再自动换行
  • 尝试的JS代码无法生效

JS代码 #

//check if number of images in each row can change when resizing the window
currentnoCols = floor(windowWidth/minImgWidth)

// Function to be executed on window resize
function handleResize() {
//calc number of columns (of width = minImgWidth) that would fit in new window width
    newnoCols = floor(windowWidth/minImgWidth)
    if newnoCols > currentnoCols then imgWidth = minImgWidth
    if newnoCols < currentnoCols then imgWidth = maxImgWidth
    currentnoCols = newnoCols
}

// Attach the resize event listener
window.addEventListener('resize', handleResize);

// Initial call to handleResize to get initial values
handleResize();

原CSS代码 #

.container {
  width: 95vw;
  text-align: center;
}

.tile {
  display: inline-block;
  height: 30vh;
  padding: 1vh;
}

img {
  width: 100%;
  height: 100%;
}

修改后的CSS代码 #

.tile {
    display: inline-block;
    max-height:50vh;
    min-height:10vh;
    padding: 1vw;
    width:auto;
  }

  img{
    width:100%;
    height:100%;
    max-height:inherit; min-height:inherit;
  }

方案一：纯CSS实现（推荐，无需JS） #

利用Flex布局可简洁实现需求，同时解决图片比例和自动换行问题：

.container {
  width: 90vw; /* 左右各留5vw边距 */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 未填满的行居中 */
  gap: 1vw; /* 控制tile间距，替代padding */
}

.tile {
  flex: 1 1 200px; /* flex-grow:1允许拉伸; flex-shrink:1允许缩小; flex-basis:200px为最小宽度 */
  min-width: 200px; /* 图片最小宽度，可自行调整 */
}

img {
  width: 100%;
  height: auto; /* 保持图片宽高比，避免拉伸 */
  display: block; /* 消除inline元素默认间距 */
  object-fit: contain; /* 可选，确保图片完整显示不裁剪 */
}

• 原理：flex:1 1 200px让tile在空间足够时保持最小宽度、自动增列；空间不足时自动缩小（不小于200px）并换行
• justify-content:center直接实现未填满行的居中效果
• height:auto确保图片按原比例缩放，不会被拉伸变形

方案二：修正JS代码（若坚持用inline-block） #

原JS代码存在语法错误和逻辑缺失，修正后如下：

// 定义全局参数
const minImgWidth = 200; // 图片最小宽度，自行调整
const maxImgWidth = 400; // 图片最大宽度，自行调整
let currentnoCols = 0;
const container = document.querySelector('.container');
const tiles = document.querySelectorAll('.tile');

// 计算窗口可用宽度（减去左右各5vw的边距）
function getAvailableWidth() {
  return window.innerWidth - 10 * window.innerWidth / 100;
}

// 初始化和resize处理函数
function handleResize() {
  const availableWidth = getAvailableWidth();
  const newnoCols = Math.floor(availableWidth / minImgWidth);
  
  let tileWidth;
  if (newnoCols > currentnoCols) {
    tileWidth = minImgWidth;
  } else if (newnoCols < currentnoCols) {
    tileWidth = Math.min(maxImgWidth, availableWidth / newnoCols);
  } else {
    // 列数不变时，缩放图片填满可用空间
    tileWidth = availableWidth / newnoCols;
  }
  
  // 将计算的宽度应用到所有tile
  tiles.forEach(tile => {
    tile.style.width = `${tileWidth}px`;
  });
  
  currentnoCols = newnoCols;
}

// 添加防抖优化resize性能
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(handleResize, 200);
});

// 初始化调用
handleResize();

配合修正后的CSS：

.container {
  width: 90vw; /* 左右各5vw边距 */
  margin: 0 auto;
  text-align: center;
  font-size: 0; /* 消除inline-block元素间的空格间距 */
}

.tile {
  display: inline-block;
  padding: 1vw;
  box-sizing: border-box; /* 让padding包含在width内，避免撑开元素 */
}

img {
  width: 100%;
  height: auto; /* 保持宽高比 */
  display: block;
}

• 修正点：补充变量定义、修复JS语法（用Math.floor替代floor，用{}替代then）、添加宽度应用逻辑、加入防抖避免resize频繁触发
• CSS中font-size:0消除inline-block元素间的默认空格间距，box-sizing:border-box确保padding不会影响元素宽度计算

内容的提问来源于stack exchange，提问作者Maarten -Monica for president