Html 仅显示来自img的中心（水平和垂直）零件，而不知道img尺寸

我试过很多东西，比如桌上电池，但都没用

我想要的是

中的
，这就是我得到的代码：

<a href="">
    <img class="center" src="http://images2.fanpop.com/images/photos/7000000/Nature-Around-the-World-national-geographic-7018209-1440-900.jpg" />
</a>
<a href="">
    <img class="center" src="http://naturalgeographic.net/wp/wp-content/uploads/2013/05/rock-climbing.jpg" />
</a>


<style type="text/css">
    a {
        position:relative;
        display:inline-block;
        width:300px;
        height:300px;
        overflow:hidden;
        border:solid 5px orange;
    }
    img.center {
        position:absolute;
        display:inline-block;
        top:-50%;
        left:-50%;
    }
</style>


a{
位置：相对位置；
显示：内联块；
宽度：300px；
高度：300px；
溢出：隐藏；
边框：实心5px橙色；
}
模拟中心{
位置：绝对位置；
显示：内联块；
前-50%；
左-50%；
}

如果没有这些元素，我可以添加任何需要的内容。但是我想要一个只有html/css的解决方案，没有javascript

感谢您的帮助。
您需要操纵
img
宽度和高度，没有它，您将无法将图片相对于其父容器放置。大概是这样的：

position: absolute;
display: inline-block;
top: -50%; left: -50%;  
width: 200%; height: 200%;

这是你的小提琴：
我建议使用背景图像而不是img标签。这样，您可以通过以下方式仅显示图像的中心部分：

background:url('http://naturalgeographic.net/wp/wp-content/uploads/2013/05/rock-climbing.jpg') no-repeat center center;

是脏的更新的JSFIDLE。
不是我想要的，因为图像大小可能会有很大的不同。但是谢谢你指向一个方向你可能弄错了小提琴的链接？没有背景图像吗？