如何为img设置最小/最大尺寸并保持宽高比？（非正方形图片适配）

太懂你的困扰了——现在用min-width/min-height + max-width/max-height强制固定尺寸，非正方形图片肯定会被拉伸变形，完全破坏原有比例。这里有个简单且现代的解决方案，靠CSS的object-fit属性就能完美搞定：

核心方案：用object-fit控制图片缩放逻辑 #

把你当前的CSS替换成下面这段，根据实际需求选择合适的object-fit值即可：

.largeartwork img {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  /* 关键控制属性 */
  object-fit: cover; 
  /* 可选：调整图片在容器内的对齐位置，默认是center */
  object-position: center;
}

不同object-fit值的效果说明： #

• cover：图片按比例缩放至填满整个300x300容器，超出容器的部分会被裁剪。适合需要图片充满容器、不留空白的场景（比如头像、封面图）。
• contain：图片按比例缩放至完整显示在容器内，容器的空白区域会保留（不会拉伸图片）。适合需要完整展示图片全部内容的场景。
• fill：就是你当前代码的效果，强制拉伸图片填满容器，会破坏比例，一般不推荐使用。

兼容旧浏览器的备选方案（若需要） #

如果你的项目要兼容IE这类不支持object-fit的浏览器，可以用背景图的方式模拟效果：

.largeartwork {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  background-size: cover; /* 同样可替换为contain */
  background-position: center;
  background-repeat: no-repeat;
}

之后把<img>标签替换为设置了background-image的<div>，或者用JS动态给容器绑定背景图即可。

这样不管是横版、竖版还是正方形图片，都能保持比例完美适配300x300的容器啦！

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