Question

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

看作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：封面确实是这样做的正确方法。

.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

替代背景大小：覆盖img标签？

1 个答案: