CODEWITHSUNDEEP
cssangular
Hearen
Hearen

Reputation: 7838

zoom inside a width fixed div

I am trying to enable a div zoomable & scrollable inside a width-fixed div when using transform: scale(aScaleRatio) to zoom in/out.

Here is a demo to achieve the zoom in/out. But the inner div just cannot present itself properly top-left-aligned even I tried to align it with position: absolute; top: 0; left:0.

Any idea will be appreciated :)

<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>

Or how can I show the 11111 in this pen?

Upvotes: 1

Views: 280

Answers (1)

Mukyuu
Mukyuu

Reputation: 6779

I supposed this is what you want: fork

Could be achieved by replacing transform-origin: left; into transform-origin: 0% 0%;

From your snippet demo:

<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>

Check the following link to learn more about transform-origin

Upvotes: 1

Related Questions