替代背景尺寸：img 标签的封面？

Question

我正在尝试让<img> 始终完全填充其包装，而不拉伸或更改图像比例。

看到object-fit 不适用于没有 polyfills 的 IE/Edge，这个解决方案是否涵盖所有边缘情况？

.image-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<div class="image-wrapper">
    <img src="*image source here*" alt="*image alt here" />
</div>

我看到的唯一问题是可能需要专门裁剪长度或宽度非常长的图像以在照片中显示所需的内容...或位置值发生变化...取决于形状如何容器与图像的形状有关。

Answer 1

background-size:cover 确实是正确的方法。

.imgwrapper{
  background: url(images/yourimage.jpg) no-repeat center center; 
  background-size: cover;
}

或者，有一些插件可以让您使用内联图像执行此操作，但我发现在使用与视图框的纵横比明显不同的图像时它们并不完美。

示例：https://www.jqueryscript.net/other/jQuery-Plugin-To-Resize-Center-An-Image-Within-Its-Container-Image-Cover.html