bugfix> jquery > 投稿

最初は英語がかわいそうです-がんばります;)

私が作成したものは次のとおりです。

JSFiddle

私がやろうとしていることは、jsを使用していくつかの異なる要素を含むdivをスケーリングすることですが、同時にインラインブロック表示を維持したいので、スケーリング後(スケール値に応じて)要素は1行に収まります。

1つの要素のHTMLは次のようになります。

<div class="containerofelements">
 <div class="resizeratio">1</div>
 <div class="resizeratio">0.75</div>
 <div class="resizeratio">0.5</div>
 <hr />
 <div class="elements" style="background-image: url(https://image.ibb.co/ha1wAo/back.png)">
   <div class="middle">middle</div>
   <div class="leftup">leftup</div>
   <div class="rightup"><img src="https://image.ibb.co/dK2BRT/profile_default_m.jpg" /></div>
   <div class="leftdown">leftdown</div>
   <div class="rightdown">rightdown</div>
 </div>
</div>

要素の量は可変であり、ほとんどの場合、「。elements」div内により多くの異なるコンテンツがあります。 ザ・ .resizeratio divは .elements をスケーリングするボタンですjqueryを使用して書き込まれた値によって。

コードを使用して、jsによって要素を正常にスケーリングし、すべての子要素の位置を維持することができました。

css({
 transform: "scale("+scale+")"
});

残念ながら、スケーリング後にdivは元の位置を維持します。気づいたように、div自体はスケーリングされますが、スケーリングエレメントが追加のマージンで埋められた後の空のスペースのように、位置は何とか変わりません。これを防ぐ方法は?

回答 2 件
  • ここにあなたのための簡単な修正があります

    JSFiddle

    divを追加するだけです(たとえば、 .wrap.elements 周辺  このようにスケールに応じて幅と高さを変更します。

    el.parent('.wrap').css({
      width: (350 * scale) + "px",
      height: (500 * scale) + "px"
    });
    
    
    .wrap {
      width: 350px;
      height: 500px;
      display: inline-block;
      position: relative;
    }
    .elements {
      width: 340px;
      height: 490px;
      background-repeat: no-repeat;
      margin: 5px;
      -moz-transform-origin: 0 0;
      transform-origin: 0 0;
    }
    
    

  • cssプロパティzoomを使用できますが、Firefoxでは機能しません。

    別の解決策は、負の左マージンと右マージンを使用することです。

    それでもうまくいかない場合は、flexboxプロパティを確認してください。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

あなたの答え