javascript - 如何将图像保留在具有设定宽度和高度的 div 中，但隐藏图像的其余部分？

Question

这有点难以形容......所以我做了一张照片!

_{(来源:tumblr.com)}

我尝试给div设置宽度和高度overflow:hidden;但这不起作用...我到处搜索，可能只是措辞不正确。

我给了标签“javascript”只是因为这可能需要javascript，如果不需要请评论并告诉我删除该标签!谢谢!

HTML

<div class="trigger" id="photoTile"> 
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{MonthNumber} {DayOfMonth} {Year}
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{block:NoteCount}{NoteCount} <img    
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>

CSS

.trigger {
margin:0 20px 20px 0;
float:left;
background:#6f7f7a;
width:115px;
height:105px;
padding:5px;
}

#photoTile {
width:115px;
height:105px;
overflow:hidden;
background:none;
}

#photoSmall {
opacity:0.4;filter:alpha(opacity=40);
position:absolute;
z-index:-1;
}

Answer 1

将图像放入 <div>具有固定的高度和宽度以及“溢出:隐藏”，肯定会裁剪包含的 <img> .

编辑 Here是一个 jsfiddle，在 100x100 <div> 中显示远大于 100x100 的图像样式为“溢出:隐藏”。这是 <div> 的 CSS :

#w { height: 100px; width: 100px; overflow: hidden; }

我不需要对<img>做任何有趣的事情。根本没有；它只是在词法上嵌套在 <div> 内.