Question

我使用div缩放-moz-transform: scale(3.2)，但我只想缩放外div而不是缩放该div中的内容（其他divc）。

这是我的代码

<div id="div1" style="-moz-transform: scale(3.2);" >
    <div id="div2">
        content
    </div>
</div>

此处我缩放div1，但div2也缩放。我只想缩放div1而不是div2，这意味着div2的内容仍会按原样显示。

Answer 1

您可以添加-moz-transform: scale(0.3125)来偏移父级。基本上0.3125 = 1 / 3.2其中3.2是应用于父级的比例因子。

<div id="div1" style="-moz-transform: scale(3.2);-webkit-transform: scale(3.2); transform: scale(3.2);" >
         <div id="div2" style="-moz-transform: scale(.3125);-webkit-transform: scale(.3125); transform: scale(.3125);">
             content
           </div>
  </div>

Answer 2

您可以通过对孩子应用倒数比例值来反转CSS scale，例如如果您对父级transform: scale(4);有1/4，则需要对孩子进行缩放transform: scale(0.25);：div { width: 50px; height: 50px; } #div1 { transform: scale(4); border: 1px solid red; margin: 100px; } #div2 { transform: scale(0.25); border: 1px solid green; }：

＆＃13;

<div id="div1">
  <div id="div2">
    content
  </div>
</div>

＆＃13;

transform: scale(0.3125);

＆＃13;

在您的情况下，您需要3.2，<li component="category/topic" class="row clearfix pinned" data-tid="1" data-index="2" data-cid="2" itemprop="itemListElement"> <meta itemprop="name" content="Welcome to your NodeBB!"> <div class="col-md-7 col-sm-9 col-xs-10 content"> <div class="avatar pull-left" data-original-title="" title=""> <div class="select" component="topic/select"> <div class="user-icon" style="background-color: #673ab7;" title="" data-original-title="admin">A</div> <i class="fa fa-check"></i> </div> </div> <h2 component="topic/header" class="title"> (I NEED TO REMOVE THIS LINE) <i component="topic/pinned" class="fa fa-thumb-tack "></i> <i component="topic/locked" class="fa fa-lock hide"></i> <a href="/topic/1/welcome-to-your-nodebb" itemprop="url">Welcome to your NodeBB!</a><br> <span class="tag-list hidden-xs"> </span> <small class="hidden-xs"><span class="timeago" title="Fri Aug 05 2016 11:44:46 GMT+0200 (CEST)">25 days ago</span></small> <small class="visible-xs-inline"> <span class="timeago" title="Mon Aug 29 2016 16:39:05 GMT+0200 (CEST)">about 19 hours ago</span> </small> </h2> </div> <div class="mobile-stat col-xs-2 visible-xs text-right"> <span class="human-readable-number">2</span> <a href="/topic/1/welcome-to-your-nodebb/2"><i class="fa fa-arrow-circle-right"></i></a> </div> <div class="col-md-1 hidden-sm hidden-xs stats"> <span class="human-readable-number" title="2">2</span><br> <small>Posts</small> </div> <div class="col-md-1 hidden-sm hidden-xs stats"> <span class="human-readable-number" title="6">6</span><br> <small>Views</small> </div> <div class="col-md-3 col-sm-3 teaser hidden-xs"> <div class="card" style="border-color: #59b3d0"> <p> <a href="/user/admin"> <span title="" class="user-icon user-img" style="background-color: #673ab7;" data-original-title="admin">A</span> </a> <a class="permalink" href="/topic/1/welcome-to-your-nodebb/2"> <span class="timeago" title="Mon Aug 29 2016 16:39:05 GMT+0200 (CEST)">about 19 hours ago</span> </a> </p> <div class="post-content"> <p>adsasdasd</p> </div> </div> </div> </li>的倒数。

如何只缩放外部div而不是内部div

2 个答案: