css - 替代背景尺寸：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