html - 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