html - 在框架内居中图像 - 没有 javascript

Question

我想将此图像居中在框架的中心，请参见下图：

我使用了溢出隐藏，所以你看不到框架外部的东西我需要只用 css 来完成 - 根本没有脚本，因为它用于不允许脚本的 3rd 方软件。除此之外，我需要能够调整图像的大小，因此需要将其声明为图像标签。请参阅小提琴以了解它必须包含的元素。最后但并非最不重要的一点是它必须是 css 2.1，所以（没有 css3）！

这是框架上的小提琴

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

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

演示

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

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

演示

Answer 2

试试下面

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

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