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;
}