将图像置于帧内 - 无需javascript

Question

我想将此图像置于画面中央，请参见下图：

我使用隐藏的溢出，所以你无法看到框架外面的东西 我需要这只用css完成 - 根本没有脚本，导致它在不允许脚本的第三方软件中使用。 除此之外，我需要能够调整图像大小，因此需要将其表示为图像标记 查看它必须包含的元素的小提琴。最后但并非最不重要的是它必须是css 2.1 at max so（no css3）！

Here is a fiddle on the frame

HTML：

<div class="frame">
    <img src="http://preview.fonqi.com/img/explain2.jpg" width="200" />
</div>

css：

.frame{
   width:200px;
   height:200px;
   border:2px solid black;
   overflow:hidden;
}

Answer 1

.frame img { margin-top: -50%; }

将图像向上移动一半的长度。

DEMO

您也可以使用定位....

.frame img { position: relative; top: -50%; }

DEMO

Answer 2

尝试下面的

在CSS img{ margin: -100px 0px;}中添加此行，它将起作用

更新小提琴：http://jsfiddle.net/QxygK/13/