Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out.
Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning top-left even with
position: absolute; top: 0; left:0Any suggestions are welcome :)
<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>Also, how do I display the code '11111' on this codepen?