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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。