css实现图片裁切效果
原始图片:
效果如图:
css:
.box {
width: 150px;
padding: 3px;
border: 1px solid #e5e5e5;
}
.img {
width: 150px;
height: 200px;
position: relative;
background: red;
overflow: hidden;
}
.img img {
width: 200px;
height: 200px;
top: 0;
left: 50%;
margin-left: -100px;
position: absolute;
}
.content {
font: 12px/24px Arial,"微软雅黑";
}
html:
<div class="box">
<div class="img">
<img src="1.jpg">
</div>
<div class="content">
这里是内容。
</div>
</div>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。