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> 中.