中心和缩放任意图像以填充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; 
} 

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