如何将img
置于设置为div
的父overflow: hidden
标记中。也就是说,我想要的是剪辑图像,但在左/右两侧剪辑,以便显示图像的中间。
<div class='wrapper'>
<img/>
</div>
然后设置样式:
.wrapper {
position: absolute;
/* position details here */
overflow: hidden;
}
.wrapper img {
height: 100%;
margin-left: -??; //what here?
}
-50%
将是父级的宽度,但我想要img本身的宽度。
Firefox支持的CSS是可以接受的。
答案 0 :(得分:13)
http://codepen.io/gcyrillus/pen/BdtEj
使用text-align,line-height,vertical-align和negative margin。 img几乎降到零,将以自身为中心。
.wrapper {
width:300px;
text-align:center;
line-height:300px;
height:300px;
border:solid;
margin:2em auto;
overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;
/* to show whats been cut off */
position:relative;
z-index:-1;
}
仅限水平:
.wrapper {
width:300px;
text-align:center;
border:solid;
margin:2em auto;
overflow:hidden
}
img {
margin:0 -100%;
vertical-align:middle;
}
答案 1 :(得分:1)
您好,请查看example
它解决了你的问题
HTML
<div class='wrapper'>
<img border="3"/>
</div>
CSS
.wrapper {
/*position: absolute;*/
/* position details here */
overflow: hidden;
text-align:center
}
.wrapper img {
height: 100%;
}
答案 2 :(得分:0)
尝试添加
display:block;
margin:0px auto;
到“.wrapper img”