Разделите отображение встроенного блока и правильное положение после использования transform: scale - PullRequest
Новая
       24

Разделите отображение встроенного блока и правильное положение после использования transform: scale

0 голосов
/ 25 мая 2018

В начале я хотел бы извиниться за мой английский - я стараюсь изо всех сил;)

Вот что мне удалось создать:

JSFiddle

Я пытаюсь масштабировать div, который содержит несколько разных элементов, с помощью js, но в то же время я хочу сохранить отображение встроенного блока, поэтому после масштабирования(или меньше, в зависимости от значения масштаба) элементы могут помещаться в одну строку.

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>

Количество элементов будет переменным, искорее всего, внутри div ".elements" будет больше разного контента..resizeratio div - это кнопки, которые масштабируют .elements по записанному значению с помощью jquery.

Мне удалось успешно масштабировать элементы и сохранять положение всех дочерних элементов с помощью js с помощью кода: 

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

К сожалению, после масштабирования div сохраняет исходную позицию.Как мне удалось заметить, сам div масштабируется, но он каким-то образом не меняет положение, точно так же, как пустое пространство после масштабирования элемента вниз заполняется дополнительным полем.Как это предотвратить?

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

Вот вам быстрое решение

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;
}
0 голосов
/ 25 мая 2018

Вы можете использовать масштабирование свойства css, но это не сработает в Firefox.

Другим решением будет использование отрицательного левого и правого полей.

Если это не сработает, вы должны взглянуть на свойство flexbox.https://css -tricks.com / snippets / css / a-guide-to-flexbox /

...