css截取图片显示部分

最新推荐文章于 2024-07-05 09:52:23 发布

Lei_zhen96

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量4.6k

点赞数 2

本文链接：https://blog.csdn.net/Lei_zhen96/article/details/88039284

版权

1.方法一 (定位)

html代码

<div class="top">
    <img src="./ex.png" alt="">
</div>
<div class="bottom">
    <img src="./ex.png" alt="">
</div>

css:

    * {
        box-sizing: border-box;
    }
    html,
    body {
        width: 100%;
        height: 100%;
    }
    .top {
        width: 100%;
        height: 100px;
        overflow: hidden;
    }
    .top img {
       margin: -200px 0 0 -200px;
    }
    .bottom img {
        width: 50px;
        height: 50px;
    }

图片：原图：