当前位置： 移动技术网 > IT编程>网页制作>HTML > CSS踩坑-------transform:scale(‘数字’)

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

2020年07月24日  | 移动技术网IT编程  | 我要评论

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(‘数字’)，这下终于搞定了，特此记录

本文地址：https://blog.csdn.net/Stefan1/article/details/107518384

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网