无法按百分比调整轮播横幅图片尺寸的问题求助

我帮你梳理下问题的核心和具体解决步骤：

你当前的代码只给img设置了宽高和左右margin，但没达到预期效果的原因有两个：

• 图片的height:50%是相对于父元素的高度计算的，如果父元素（也就是figure.slider）没有明确设置高度，这个百分比就没有参照基准，自然不会生效；
• margin-left: auto; margin-right: auto;要生效，需要图片是块级元素，或者父元素使用flex布局来实现居中。

具体修改方案 #

方案1：使用Flex布局（推荐，居中更简便）

给父容器figure.slider添加宽高和flex属性，同时调整图片的尺寸规则避免变形：

/* 给父容器设置宽高基准，同时用flex实现水平+垂直居中 */
figure.slider {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  margin: 0; /* 清除默认的figure外边距，避免影响布局 */
}

/* 用max-width/max-height保证图片按原比例缩小，不会拉伸变形 */
figure.slider img {
  max-width: 50%;
  max-height: 50%;
}

方案2：传统块级元素居中（不用Flex）

如果不想用flex，就把图片设为块级元素，同时给父容器设置宽高：

figure.slider {
  width: 100%;
  height: 100%;
  margin: 0;
}

figure.slider img {
  width: 50%;
  /* 要保持比例的话，建议去掉固定height，用object-fit保证图片完整显示 */
  max-height: 50%;
  object-fit: contain;
  display: block; /* 转为块级元素，让margin:auto生效 */
  margin-left: auto;
  margin-right: auto;
}

额外注意点 #

如果figure.slider的上层容器（比如body、html或者包裹它的div）也没有设置高度，那figure.slider的height:100%也不会生效，这时候需要给上层容器也加上宽高：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

这样就能让图片按照你的需求缩小并居中显示了。

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