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>

 

posted @ 2014-12-03 13:39  K13  阅读(1292)  评论(0编辑  收藏  举报