设置height:100%后含图按钮仍无法达到max-height:160px上限如何解决

安全阿岳

2026-10-6

问题根因

你当前的样式存在两个核心问题导致效果不生效：

父按钮仅设置了max-height限制最大高度，没有明确基础高度，CSS中百分比高度的生效前提是父元素有可计算的明确高度值，因此子图片的height: 100%规则无效
img标签设置width: 100%会优先按照宽度适配，高度会随图片比例自适应，不会主动撑到父容器的最大高度限制，同时button元素默认的内置padding也会占用高度空间，进一步限制内容高度

修复方案

需求1：按钮高度随图片尺寸自适应，最高不超过160px

修改后CSS如下：

.img-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: none;
  background: none;
  max-height: 160px;
  max-width: 250px;
  /* 新增：清除按钮默认内边距 */
  padding: 0;
}

.img {
  /* 新增：和父容器保持一致的最大宽高限制，自动按比例缩放 */
  max-height: 160px;
  max-width: 250px;
  /* 新增：保持图片比例不变形，完整展示 */
  object-fit: contain;
  /* 新增：清除img标签默认底部空隙 */
  display: block;
}

需求2：按钮固定撑到最大高度160px，图片占满按钮高度

修改后CSS如下：

.img-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: none;
  background: none;
  max-height: 160px;
  max-width: 250px;
  padding: 0;
  /* 新增：明确设置按钮高度为最大值，子元素百分比高度可生效 */
  height: 160px;
  width: 250px;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}