[英]How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?
It's kind of difficult to word... So I made a picture! 很难说...所以我拍了张照片!
(source: tumblr.com ) (来源: tumblr.com )
I tried giving the div that has a set width and height overflow:hidden; 我尝试给具有设置的宽度和高度的div溢出: but that didn't work... I searched all over and I probably just didn't word it right.
但这行不通...我到处搜寻,可能只是措辞不正确。
I gave the tag 'javascript' just because this may require javascript, if it doesn't please comment and tell me to remove the tag! 我给标签'javascript'只是因为这可能需要javascript,如果它不需要,请发表评论并告诉我删除该标签! Thankyou!
谢谢!
HTML HTML
<div class="trigger" id="photoTile">
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>
CSS 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;
}
Putting the image in a <div>
with fixed height and width, and "overflow: hidden", most definitely will crop an included <img>
. 将图像放在高度和宽度固定且<overflow:hidden
<div>
的<div>
,肯定会裁剪包含的<img>
。
edit Here is a jsfiddle showing an image much larger than 100x100 in a 100x100 <div>
styled with "overflow: hidden". 编辑 这是一个jsfiddle,它以“溢出:隐藏”样式显示了100x100
<div>
比100x100大得多的图像。 Here's the CSS for the <div>
: 这是
<div>
的CSS:
#w { height: 100px; width: 100px; overflow: hidden; }
I didn't have to do anything interesting with the <img>
at all; 我根本不需要对
<img>
做任何有趣的事情; it's just lexically nested inside the <div>
. 它只是按词法嵌套在
<div>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.