最初は英語がかわいそうです-がんばります;)
私が作成したものは次のとおりです。
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 件
cssプロパティzoomを使用できますが、Firefoxでは機能しません。
別の解決策は、負の左マージンと右マージンを使用することです。
それでもうまくいかない場合は、flexboxプロパティを確認してください。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
関連した質問
- テキストの下に日付ピッカーを表示する方法
- jQueryでクリック時にHTMLメニューを切り替える
- CSSを使用して、あるスイッチを別のスイッチに基づいて切り替えるにはどうすればよいですか?
- 画面サイズが大きくなったときに最後の要素に自動スクロールする方法
- $(…)niceSelectとJqueryは関数ではありません
- HTMLの入力フォームでバックグラウンドURLCSSを編集することは可能ですか?
- JQueryで2つの要素のテキストを比較する方法は?
- スナックバーを上からアニメーション化する
- jQuery addClassは機能しますが、javascriptclassListaddは機能しません
- 複数のコンビネータを使用してjQueryでcssを設定する方法
ここにあなたのための簡単な修正があります
JSFiddle
divを追加するだけです(たとえば、
.wrap
).elements
周辺 このようにスケールに応じて幅と高さを変更します。