CSS 3.0中裁剪图像的特效

越陌度阡

发布于 2020-11-26 03:21:38

1.1K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

在有CSS 3.0之前裁剪图片实现也是颇有难度的，现在我们有了两个非常方便简单的属性可以实现裁剪，那就是object-fit和object-position，这两个属性可以让我们改变图片的大小，但是不影响图片的长宽比，利用它我们可以实现一个如下的特效。

以下是代码实现，欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS 3.0中裁剪图像的特效</title>
        <style>
            main {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #000;
                margin-top:50px;
            }
            input {
                transform: scale(1.5);
                margin: 10px 5px;
                color: #fff;
            }

            input:checked+br+img {
                width: 480px;
                height: 270px;
                object-fit: cover;
                object-position: left-top;
                transition: width 2s, height 4s;
            }

            img {
                width: 960px;
                height: 540px;
                transition: 0s;
            }

        </style>
    </head>

    <body>
        <main> 
            勾选裁剪图片 <input type="checkbox" />
            <br />
            <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
        </main>
    </body>

</html>