увеличение внутри фиксированной ширины - PullRequest
Новая
       3

увеличение внутри фиксированной ширины

0 голосов
/ 07 января 2019

Я пытаюсь включить прокрутку с div масштабированием & внутри с фиксированной шириной div при использовании transform: scale(aScaleRatio) до увеличения / уменьшения .

Вот демоверсия для достижения увеличения / уменьшения . Но внутренний div просто не может представить себя должным образом по левому верхнему краю , даже если я попытался выровнять его с position: absolute; top: 0; left:0.

Любая идея будет оценена по достоинству:) 

<html>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<div style="width: 1000px; height: 800px; position: absolute; top: 100px">
  <div style="position: absolute; right: 16px; z-index: 2;">
    <!---something else--->
  </div>
  <!--- this is the scrollable outer div --->
  <div
    style="width:3000px; background-color:red; height: 2000px; z-index: 1; overflow: auto;"
  >
    <!--- I am trying to zoom this div in/out --->
    <!--- sadly I cannot align it within the outer div --->
    <div
    style="position: absolute; transform: scale(1.2); background-color: black; width: 500px; height: 400px; top: 0; left: 0;"
    ></div>
  </div>
</div>
</body>
</html>

Или как мне показать 11111 в этой ручке ?

1 Ответ

0 голосов
/ 07 января 2019

Я предположил, что это то, что вы хотите: fork

Может быть достигнуто заменой transform-origin: left; на transform-origin: 0% 0%;

Из демоверсии вашего фрагмента: 

<html>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<div style="width: 1000px; height: 800px; position: absolute; top: 100px">
  <div style="position: absolute; right: 16px; z-index: 2;">
    <!---something else--->
  </div>
  <!--- this is the scrollable outer div --->
  <div
    style="width:3000px; background-color:red; height: 2000px; z-index: 1; overflow: auto;"
  >
    <!--- I am trying to zoom this div in/out --->
    <!--- sadly I cannot align it within the outer div --->
    <div
    style="position: absolute; transform: scale(1.2); background-color: black; width: 500px; height: 400px;  transform-origin: 0% 0%;"
    ></div>
  </div>
</div>
</body>
</html>

Проверьте следующую ссылку , чтобы узнать больше о transform-origin

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...