如何将图片适配固定至盒子容器内？求最简实现代码

以下是实现需求的最简代码，核心通过max-width/max-height限制图片尺寸，结合overflow:hidden处理横版图片的溢出：

<!-- HTML结构 -->
<div class="image-container">
  <img src="你的图片地址" alt="照片">
</div>

/* CSS样式 */
.image-container {
  width: 300px; /* 容器宽度，按需调整 */
  height: 400px; /* 容器高度，按需调整 */
  border: 1px solid #ccc; /* 可选：显示容器边界，方便调试 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  position: relative;
}

.image-container img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%; /* 横版图片宽度不超过容器 */
  max-height: 100%; /* 竖版图片高度不超过容器 */
}

效果说明 #

• 竖版照片：图片高度被限制为容器高度，宽度按比例自动缩小，完全容纳在容器内，无溢出
• 横版照片：图片宽度被限制为容器宽度，高度按比例放大，超出容器的部分被隐藏，保持左上方的显示位置（与截图2一致）

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