簡單的方法來自動移動圖像在css

Question

我的目標是拍攝一個圖像（大小變化），並使其適合一個容器（330x330像素）。我不想調整圖像大小。我只想讓CSS自動將它自動移動到圖片上，就好像它是用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以上，歌劇，鉻，和Safari 5+。