如何实现不裁剪不拉伸、带max-height限制的自适应容器宽度图片展示

解决方案 #

方案1：纯CSS实现（推荐，无性能开销） #

直接调整现有CSS即可满足所有需求，无需额外JS代码，修改后样式如下：

.avatar-box {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.avatar-thumb-square2 {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-height: 400px;
  /* 实现宽度不足时图片水平居中 */
  text-align: center;
}

.avatar-thumb-square2 .avatar-image {
  /* 移除原来的绝对定位与位移属性 */
  display: inline-block;
  /* 限制最大宽高，避免超出容器 */
  max-width: 100%;
  max-height: 400px;
  /* 保持图片原始宽高比，完整展示不裁剪 */
  object-fit: contain;
}

效果说明：

• 宽屏图片：自动铺满容器宽度，高度按比例自适应，不超过400px
• 竖屏图片：高度自动限制为400px，宽度按比例缩放，小于容器宽度时自动居中
• 外层容器overflow: hidden保留，圆角效果不受影响

方案2：JS实现（适配不支持object-fit的老旧浏览器） #

如果需要兼容IE等不支持object-fit属性的环境，可以用JS动态计算图片尺寸调整样式：
首先保留大部分原有CSS，仅给父容器加最大高度限制：

.avatar-box {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.avatar-thumb-square2 {
  overflow: hidden;
  position: relative;
  max-height: 400px;
}

.avatar-thumb-square2 .avatar-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

添加JS代码：

const MAX_IMG_HEIGHT = 400
document.querySelectorAll('.avatar-image').forEach(img => {
  // 图片加载完成后计算宽高比
  const adjustSize = () => {
    const naturalRatio = img.naturalWidth / img.naturalHeight
    const containerWidth = img.closest('.avatar-thumb-square2').offsetWidth
    // 按宽度100%计算的高度超过最大限制时，切换为限制高度
    if (containerWidth / naturalRatio > MAX_IMG_HEIGHT) {
      img.style.width = 'auto'
      img.style.height = `${MAX_IMG_HEIGHT}px`
      img.style.left = '50%'
      img.style.transform = 'translate(-50%, -50%)'
    } else {
      img.style.width = '100%'
      img.style.height = 'auto'
      img.style.left = '0'
      img.style.transform = 'translateY(-50%)'
    }
  }
  // 处理加载完成/缓存两种情况
  img.complete ? adjustSize() : img.addEventListener('load', adjustSize)
})

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