変換を使用した後のDivインラインブロック表示と適切な位置：スケール

bugfix> jquery > 投稿 2020-08-22 18:28

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

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

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自体はスケーリングされますが、スケーリングエレメントが追加のマージンで埋められた後の空のスペースのように、位置は何とか変わりません。これを防ぐ方法は？

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/

bugfix

変換を使用した後のDivインラインブロック表示と適切な位置：スケール

jquery

css

scale

関連記事