Question

这很难说...所以我拍了一张照片！

http://26.media.tumblr.com/tumblr_lfyudgGauy1qboy47o1_r1_400.png

我尝试给出设置宽度和高度溢出的div：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的图像，其中“overflow：hidden”。这是<div>的CSS：

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

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

中

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

1 个答案: