在css中自动移动图像的简便方法

Question

我的目标是拍摄一张图片（尺寸各不相同）并让它适合设定的容器（330x330像素）。我不想调整图像大小。我想简单地让css让它自动移动到cetner图片就像用330x330裁剪一样。

如果我放入的图片小于330x330，那么我认为它必须扩大规模。例如，如果它是200x800那么它会拉伸它然后垂直移动图像以显示中心？

这是否可能或者如果没有很多恼人的PHP，我想要做的事情是不可能的？感谢

Answer 1

您可以使用：

​div {
  width: 330px;
  height: 330px;
  background: url("http://placekitten.com/800/200") 50% 50% no-repeat;   
  background-size: cover;
}​

它应该适用于：IE9 +，Firefox 4 +，Opera，Chrome和Safari 5 +。