transform:scale不缩小实际空间的问题

最新推荐文章于 2023-02-08 19:28:38 发布

颖_恋

最新推荐文章于 2023-02-08 19:28:38 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：样式设置文章标签： transform: scale不减小实际空间

本文链接：https://blog.csdn.net/line233/article/details/103142916

样式设置专栏收录该内容

6 篇文章

订阅专栏

本文探讨了CSS的transform: scale属性在缩放元素时不会减少实际空间的问题，强调该属性对行内元素无效，但适用于块级和原子行内级元素。在设计需求下使用transform: scale会导致内容缩小但占用空间不变。文中提出了两种解决方案：一是通过改变transform-origin来调整变化原点；二是利用zoom属性，它能缩小元素实际占用的空间，并且现在被多数浏览器支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先声明一点，transform: scale对行内元素无效，而对块级元素和原子行内级元素生效等。

在开发中，有时会因满足设计需要而对元素进行整体缩放，transform: scale是现代浏览器都支持的css元素，应该是首选，但它会引发一个问题，虽然可以缩小整体显示的内容，但是并没有引起重排，所以占据的实际空间没有缩小，具体看下面的代码以及图片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用scale缩小之后实际空间没有减小的问题解决</title>
    <style type="text/css">
    i {
    	font-style: normal;
    }
    .container {
        margin: 100px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 140px;
        padding: 5px 10px 7px;
        display: inline-block;
        height: 48px;
        line-height: 48px;
        padding: 0 10px;
        text-align: center;
        color: #fff;
        background: linear-gradient(270deg, rgba(237,8,2,1) 0%,rgba(253,82,22,1) 100%);
        border-radius: 30px;
    }
    .b {
        font-size: 24px;
        font-family: PingFangSC-Regular;
        line-height: 33px;
        height: 33px;
    }
    .price {
        line-height: 33px;
        height: 33px;
        font-size: 32px;
        font-weight: 700;
        display: inline-block;/*transform对行内元素不生效*/
        transform-origin: bottom right;
        transform: scale(.7);
        margin-left: -6px;
    }
    </style>
</head>
<body>
    <span class="container">
        <i class="b">B</i>
        <i class="price">3920.00</i>
    </span>
</body>
</html>