在固定宽度/高度（100px）的div中显示图像

Question

所以我有一个100px宽/高的div，其中我要显示一个图像（假设图像宽度/高度为200px）。
图像不应该调整大小，div应该只显示图像的中心（100px）并隐藏其余部分。

您可以在下图中更好地了解我的意思：
http://i.imgur.com/b8nbnO1.png

<div class="crop-image">
<a href="some link"><img src="http://i.imgur.com/b8nbnO1.png" /></a>
</div>

如果图像小于100px，则将填充应用于
的链接 （100px - 图像宽度）/ 2用于左右填充
（100px - 图像高度）/ 2用于填充顶部和底部

Answer 1

您可以使用background-image和background-position执行此操作：

div {
    width:100px;
    height:100px;
    background-image:url('http://www.placehold.it/200/200/');
    background-position:center;
}

这是一个小提示：http://jsfiddle.net/A4wQE/

通过设置div元素的高度和宽度，您可以“裁剪”更大的图像。另外，使用background-position:center;确保它始终位于div。

的中心位置

<强>更新

由于您需要将图片作为链接，因此您只需将div打包在a标记中即可。从HTML5开始，<a>元素可以包含块元素。

Answer 2

如果您的图片传达了内容，则不应将其放置为背景：因此您可以使用clip属性（也可用于较旧的IE版本）

标记

<div class="crop-image">
   <a href="#"><img src="http://dummyimage.com/200x200/000/fff" /></a>
</div>

的CSS

.crop-image {
    position: absolute;
    clip: rect(50px 150px 150px 50px);
}

关于codepen的示例：http://codepen.io/anon/pen/Ljpxc/

---

截图