Удалить пространство, которое пришло после преобразования - PullRequest
Новая
       25

Удалить пространство, которое пришло после преобразования

0 голосов
/ 10 января 2020

Я хочу создать PDF макета. Там будет фиксированный размер для div, например. Ширина div 720px и я хочу поддерживать его 720 на всех устройствах. Так как div будет go вне экрана на мобильных устройствах, я использовал его для преобразования (масштабирования) в небольшой размер, но под div есть место. Я хочу удалить это место. ниже приведен код для вашей справки. 

.Scale {
  background-color: #dddddd;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.Scale {
  transform: scale(0.5);
  transform-origin: top left;
}

.parent{
  border: 1px solid;
}
<div class="parent">
  <div class="Scale">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 10 января 2020

Вы видите "пробел ниже div", потому что ваш <div class="parent"> не уменьшается, поэтому его 1px border останется в том же положении. В то же время вы уменьшили <div class="Scale">, и теперь он меньше, чем родитель, чья граница видна.

До "удалить" пробел ниже масштабированного div, Вы также должны уменьшить родительский элемент, добавив к нему класс .Scale следующим образом: 

<div class="parent Scale">
  <div class="Scale">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
</div>

Также для более чистого кода сгруппируйте класс .Scaled вместе в свой css. 

.Scale {
  background-color: #dddddd;
  transform: scale(0.5);
  transform-origin: top left;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.parent{
  border: 1px solid;
}

Надеюсь, это поможет!

0 голосов
/ 10 января 2020

Я не уверен на 100%, соответствует ли это тому, о чем вы просите, но если вы вместо этого используете ScaleX, то пространство под ним исчезает, поскольку вы масштабируете только по оси X.

Попробуйте следующий код: 

.Scale {
  background-color: #dddddd;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.Scale {
  transform: scaleX(0.5);
  transform-origin: top left;
}

.parent{
  border: 1px solid;
}
        <div class="parent">
            <div class="Scale">
              <div class="red"></div>
              <div class="blue"></div>
            </div>
          </div>
...