css - 替代背景大小 : cover for img tags?

Question

我正在尝试制作一个 <img>在不拉伸(stretch)或改变图像比例的情况下始终完全填充其包装。

视为 object-fit在没有 polyfill 的情况下不适用于 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;
}

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

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