居中并缩放任意图像以填充div

Question

我有一个未知大小的容器div *。我想用未知大小的图像填充它，使图像完全填充div，保持纵横比。

然后我想让图像居中，使裁剪的部分位于边缘。

我还需要一种方法来确保容器的填充不会显示任何图像。

*如果有帮助，容器的大小并不是真的未知。这是一个Bootstrap列，所以我可以根据需要计算宽度。

解决方案

这些风格起到了作用：

background: url(...) no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;

Answer 1

使用背景图像可以轻松实现。在您按照自己的喜好指定它之后，只需将以下CSS添加到您的容器中，使背景确实覆盖其容器，同时保持宽高比：

CSS代码

.container {
    background-size: cover;
}

这将不考虑最大尺寸，并将图像拉伸超出其原始分辨率，从而导致潜在的模糊。