CSS踩坑-------transform:scale(‘数字’)

最新推荐文章于 2025-04-10 08:00:00 发布

Stefan1

最新推荐文章于 2025-04-10 08:00:00 发布

阅读量1.1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Stefan1/article/details/107518384

版权

在HTML页面格式修改中，遇到调整图片位置和大小的问题。首先尝试使用margin、padding等属性，但未能实现图片右对齐。通过display: inline-block和float:right实现了文字靠右，然后调整图片大小时，width、height、max-width和max-height效果不理想。最后采用transform:scale(‘数字’)成功缩放图片且保持原形，解决了问题。

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

transform:scale(‘数字’)

今天进行HTML页面格式修改大致代码如下：

<style type="text/css">
    .login_row{
        width: 90%;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
    }
    .font_14{
        display: inline-block;
        font-size: 14px;
    }
    .text-14{
        display: inline-block;
        font-size: 14px;
        float:right;
    }
    .pullDown_img{
        display: inline-block;
        float:right;
        transform:scale(0.4)

    }
</style>
<body class="background_fff">
<header style="display: none">
    <span>礼券发放</span>
</header>
<div class="clearFix d-flex flex-column a-center pt-4">
    <div class="login_row">
        <div class="font_14 color_1a mb-2 font-family">活动名称</div>
        <div class="pullDown_img">
            <img src="${basePath}/static/smartmics/images/stamps.png" alt="">
        </div>
        <div class="text-14 mr-1" id="activityValue"></div>

    </div>
    <div class="login_row">
        <div class="font_14 color_1a mb-2 font-family">礼券名称</div>
        <div class="pullDown_img">
            <img src="${basePath}/static/smartmics/images/stamps.png" alt="">
        </div>
        <div class="text-14 mr-1" id="giftValue"></div>

    </div>
    <input type="hidden" id="activityNo" value="">
    <input type="hidden" id="giftNo" value="">
    <div class="login_row">
        <div class="font_14 color_1a mb-2 font-family">手机号码</div>
        <!--<input type="text" id="mobile" placeholder="请输入手机号码" style="background: #EAEAF0;">-->
    </div>
    <div class="signin_btn btn_background" id="saveUserInfo" onclick="send()">确定</div>
</div>

我需要给图片更改位置和大小，我先使用 margin padding 等进行设置将图片移动到了指定位置，

然后被要求将景点门票两个内容靠右对齐，这时候使用 margin padding 就不起作用了，text-align 也没用，后来发现别人用 display: inline-block; float:right; 浮动设置，然后试了一下成功了，文字到右边了，然后又被要求将图片（下拉图片）的大小调整一下，这时候我使用了 width height都不起作用，要不就是没反应要不就是会影响别的元素位置，还用到了 max-width max-height ，但是都没达到理想效果，后来问专业前端朋友，他让我试试transform:scaleY(‘数字’) transform:scaleX(‘数字’) （这是按照X轴或者Y轴进行缩放，数字越大元素也越大，图片会沿着X或者Y变形）有效果，但是两者同时只能有一个起效，而且我需要的是图片不变形，后来他又让我试试transform:scale(‘数字’)，这下终于搞定了，特此记录