如何调整容器内图片大小并保持底部定位与宽高比？

你需要的是让图片保持宽高比缩小，同时紧贴容器底部，不会出现间隙也不会被裁剪。可以用下面两种方案实现：

方案一：绝对定位法 #

给容器开启相对定位，把图片绝对定位在底部，同时限制图片的最大宽高不超过容器，这样图片会自动按比例缩小并贴在底部：

#player-holder {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  position: relative; /* 作为图片的定位参照 */
  overflow: hidden; /* 可选，防止图片超出容器边缘 */
}

#player-image {
  position: absolute;
  bottom: 0; /* 固定在容器底部 */
  left: 50%; /* 可选：让图片水平居中 */
  transform: translateX(-50%); /* 配合left实现水平居中 */
  max-width: 100%; /* 图片宽度不超过容器 */
  max-height: 100%; /* 图片高度不超过容器 */
}

方案二：Flex布局修正版 #

之前用Flex没生效是因为没搭配对属性，给容器设置垂直靠下对齐，同时限制图片的最大尺寸，就能实现需求：

#player-holder {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center; /* 可选：水平居中图片 */
  align-items: flex-end; /* 强制图片靠容器底部 */
  overflow: hidden;
}

#player-image {
  max-width: 100%;
  max-height: 100%;
}

为什么之前的尝试没效果？ #

• 用object-fit: contain时，图片会完整显示但会保留空白区域，因为它是让图片适配容器的最小边，而非贴紧底部；
• 之前的Flex布局没生效，大概率是没设置align-items: flex-end，或者没给图片加max-width/max-height限制，导致图片还是填满容器；
• 直接修改图片宽高会打破比例，所以必须用max-width和max-height来让图片自动按比例缩放。

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