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

演示版