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

演示

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