CSS学习37：图片缩放

最新推荐文章于 2024-04-19 10:18:52 发布

玉安_ZhangDe

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量3.2k

点赞数 2

分类专栏： CSS 文章标签：前端学习 css3 css

本文链接：https://blog.csdn.net/qq_47373340/article/details/124236267

版权

CSS 专栏收录该内容

39 篇文章 7 订阅

订阅专栏

语法：

1、x y 单独设置

transform: scale(x轴缩放倍数, y轴缩放倍数);

2、统一设置

transform: scale(缩放倍数);

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

案例效果：

代码：

<head>
    <style>
        div {
            margin: 100px auto;
            width: 446px;
            height: 445px;
            /* 超出的范围不可见 */
            overflow: hidden;
        }
        img {
            width: 446px;
            height: 445px;
            /* 设置img缩放的速度 */
            transition: all .7s;
        }
        img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div>
        <img src="HUAWEI P50E.jpg" alt="HUAWEI P50E">
    </div>
</body>
</html>

玉安_ZhangDe

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
CSS学习37：图片缩放

语法：1、x y 单独设置transform: scale(x轴缩放倍数, y轴缩放倍数);2、统一设置transform: scale(缩放倍数);一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放transform: scale(缩放倍数);scale值大于1表示放大, scale值小于1表示缩小案例效果：代码：<head> <style> div { margin:
复制链接

扫一扫