代码之家 › 专栏 › 技术社区 › Hearen

在固定宽度的div内缩放

angular css

1

Hearen · 技术社区 · 7 年前

div 可缩放 & 可滚动的 宽度固定 div 使用时 transform: scale(aScaleRatio) 到 放大/缩小 .

demo 实现 放大/缩小 . 但是 内部的 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 在这个 pen

1 回复 | 直到 7 年前

1

Mukyuu 7 年前

我想这就是你想要的: 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>

检查以下各项 link transform-origin