img标签替代background-size:cover的方案，该CSS写法是否覆盖所有边缘情况？

嘿，这个方案其实是个很经典的object-fit: cover兼容写法，专门用来搞定IE/Edge这类不支持object-fit的老浏览器，咱们来拆解下它的覆盖情况和潜在注意点：

这个方案能覆盖的核心场景 #

它的效果和object-fit: cover完全一致，而且兼容所有IE版本和旧版Edge，不需要任何polyfill：

• 当图片宽高比大于容器时：min-width: 100%会让图片宽度铺满容器，高度自然超出容器，overflow: hidden裁剪上下多余部分，再通过transform: translate(-50%, -50%)把图片居中，完美填充且不拉伸。
• 当图片宽高比小于容器时：min-height: 100%让图片高度铺满，宽度超出，裁剪左右多余部分，同样居中显示。
• 当图片尺寸小于容器时：min-width和min-height会强制图片至少填满容器的一边，另一边超出后被裁剪，不会出现拉伸变形的情况。

需要注意的边缘情况 #

虽然这个方案很靠谱，但有几个小细节要留意：

• 如果全局样式给img加了max-width: 100%或max-height: 100%，会和咱们设置的min-width/min-height冲突，导致图片无法填满容器。解决方法是给.image-wrapper img额外加上max-width: none; max-height: none;来重置这些属性。
• 如果图片的实际分辨率远小于容器尺寸，图片会被强制放大，可能出现模糊问题——这是所有“填充容器”类方案的通病，不是这个写法的锅，要解决的话只能用更高分辨率的图片。
• 容器如果是弹性布局（flex）或百分比宽高，这个方案依然有效，因为position: absolute的定位是基于父容器的relative，transform的居中计算也不受容器单位影响。

优化后的完整代码 #

.image-wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.image-wrapper img {
  min-height: 100%;
  min-width: 100%;
  max-width: none; /* 重置全局max-width干扰 */
  max-height: none; /* 重置全局max-height干扰 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="image-wrapper">
  <img src="your-image-url.jpg" alt="描述文本">
</div>

总结 #

整体来说，这个方案已经能覆盖绝大多数实际业务场景，是针对IE/Edge兼容需求的非常可靠的替代方案，几乎没有致命的边缘问题。

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