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>