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

提问于 2024-05-05T00:24:48+08:00

浏览次

0

所以我有一个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用于填充顶部和底部

2 回答

0
您可以使用 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 元素的高度和宽度，您可以"crop"更大的图像 . 另外，使用 background-position:center; 确保它始终位于 div 的中心位置 .

UPDATE

由于您需要将图像作为链接，因此您只需将 div 包装在 a 标记中即可 . 从HTML5开始，允许 <a> 元素包含块元素 .
回复于 2024-05-05T00:24:48+08:00
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);
}
```
代码集上的示例：http://codepen.io/anon/pen/Ljpxc/

截图
回复于 2024-05-05T00:24:48+08:00

相关问题