带最大高度与最大宽度的响应式图片适配问题

当然有可行的方案！咱们可以通过调整容器和图片的CSS属性，既实现响应式适配，又保证图片不会变形，同时严格遵守最大宽高限制。

问题根源分析 #

你之前的代码里，width: auto没法让图片跟着父容器宽度缩放；而直接设width: 100%又会让竖版图片被强行拉宽，破坏比例——因为此时高度被max-height:800px限制后，宽度还是100%，导致变形。

解决方案代码 #

我们需要让容器先做响应式适配，再让图片在容器内自动保持比例：

HTML（无需修改）：

<div class="kalim"><img src="你的图片地址"></div>

调整后的CSS：

.kalim {
  display: inline-block;
  max-width: 800px; /* 容器最大宽度限制 */
  max-height: 800px; /* 容器最大高度限制 */
  width: 100%; /* 让容器在父容器宽度不足800px时，占满可用宽度 */
}

.kalim img {
  max-width: 100%; /* 图片宽度不超出容器宽度 */
  max-height: 100%; /* 图片高度不超出容器高度 */
  width: auto; /* 自动适配宽度，保持原始比例 */
  height: auto; /* 自动适配高度，保持原始比例 */
}

原理说明 #

1. 容器.kalim设置width:100%后，会自动填满父容器的可用宽度（实现响应式），同时max-width:800px和max-height:800px会阻止它超出设定的最大尺寸；
2. 图片通过max-width:100%和max-height:100%限制自身不会超出容器范围，而width:auto和height:auto则确保图片始终保持原始宽高比，不会被拉伸变形；
3. 不管是横版还是竖版图片，都会自动调整到最合适的大小：横图最多宽800px，高度按比例缩小；竖图最多高800px，宽度按比例缩小，完美适配各种窗口缩放场景。

可选优化（填满容器） #

如果想要图片完全填满容器（不留空白），同时保持比例裁剪掉多余部分，可以把图片的CSS改成：

.kalim img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这个选项可以根据你的实际需求来选择。

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