CSS将图像居中而不调整大小？

Question

是否有任何CSS技巧在设置宽度/高度中居中图像而不调整图像大小？

例如，如果我尝试将以下图像放入一个150 x 150的容器中，它将被调整大小。

原始

集装箱

我想实现这个：

这可以用CSS来实现吗？

Answer 1

您可以将其设置为背景图片并使用background-position。

#foo { 
    width: 150px; 
    background-image:url('http://i.stack.imgur.com/BP0dH.jpg'); 
    height: 150px; 
    background-position: center; 
} 

Demo

Answer 2

你可以尝试这样的事： HTML：

<div class="container"> 
<img src='' /> 
</div> 

CSS：

.container { 
width: 150px; 
height: 150px; 
position: relative; 
overflow: hidden; 
} 

.container img { 
max-height: 150px; 
position: absolute; 
left: 50%; 
margin-left: -75px; 
}