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