根据容器中的位置按方向缩放答案

【问题标题】：Scale in Direction based on Location in Container根据容器中的位置按方向缩放
【发布时间】：2022-09-23 23:14:42
【问题描述】：

我想在 div 悬停时缩放它的大小，以便更详细地查看它的内容。

我对如何做到这一点有两个想法，首先有一个 onHover ，当悬停时会显示一个绝对定位的 div，它可能比相对 div 大 125%-130% 并将其放在顶部。（我有点喜欢这个想法，因为它允许我使新的 div 具有与下面的内容不同的内容）

另一个想法只是使用变换来缩放原始 div。我真的不想这样做，因为“弹出”的 div 是底层内容的更详细版本。

我可以做到这一点没问题，但是我遇到的部分（并且似乎无法找到答案）是根据它在容器行中的位置在某个方向上缩放 div .

我在下面创建了一个描述它的图像。

默认行为类似于：

如您所见，默认行为是，当我们缩放时，我们向左对齐，额外的宽度将向外向右，额外的高度将向下

这个问题是，在最右边，缩放的 div 已经这样做了，但是由于它的位置/方向，它现在已经离开并向右（在容器外）。

同样，我希望 2 个中心 div 从中心而不是从左到右缩放。

请注意，并非所有 div 都会立即展开，但我只是为了这个问题的目的而以这种方式突出显示它。

我想要的结果（显示所有扩展）将类似于：

显然，随着它们全部展开，这有点难以看到，但如果我只显示一个中心 div 正在展开：

然后最右边

那么区别是什么呢？

首先，每个 div 基于它的相对容器垂直居中（这很容易做到），但我坚持的部分是如何告诉中心 div 从中心垂直和扩展水平，然后告诉最左边和最右边的div，从中心垂直扩展，但水平从左到右或从右到左等。

在上面的最后一张图中，div 知道它在容器的最右侧，不应该以默认方式展开，因为它会溢出容器，所以它会向内展开。

仅使用 CSS 是否可行？还是CSS和JS的结合。

我希望这是有道理的！

如果您使用的是变换比例，则变换原点将允许您指定比例从developer.mozilla.org/en-US/docs/Web/CSS/transform-origin 开始的位置
我假设这适用于我正在转换缩放 div 本身，但在我的示例中，我正在创建一个包含详细内容的新 div。因此，新的 div 并没有真正被缩放，而是只是一个 div，其大小比它的父级大 x%。是否建议使用这种方法，或者当我缩放时，清除初始 div 的内容以添加更详细的内容？

标签： javascript html css

【解决方案1】：

这是你要找的东西吗？ bigbox div 是 small box 的子元素，我已经完全定位了它，然后使用了一堆实用程序类来定位子 div。应该是不言自明的，但请给我评论，我会进一步详细说明。

* {
  box-sizing: border-box;
}

.smallbox {
  --offset: 0.5rem;
  position: relative;
  display: inline-block;
  aspect-ratio: 2/1;
  background-color: #dae8fc;
  border: 1px solid #6c8ebf;
  padding: 0.5rem;
  margin: 1rem;
}

.bigbox {
  font-size: 1.25rem;
  position: absolute;
  padding: 0.5rem;
  background-color: #d5e8d4;
  border: 1px solid #82b366;
  width: 150%;
  aspect-ratio: 2/1;
  opacity: 0;
  z-index: 1;
}

.smallbox:hover .bigbox {
  opacity: 1;
}

.left {
  left: calc(-1 * var(--offset));
}

.right {
  right: calc(-1 * var(--offset));
}

.top {
  top: calc(-1 * var(--offset));
}

.center {
  left: 50%;
  translate: -50%;
}

.middle {
  top: 50%;
  translate: 0 -50%;
}

.bottom {
  bottom: calc(-1 * var(--offset));
}

.center.middle {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

<div class='smallbox'>
  Some content
  <div class='bigbox left top'>
    Some content (but bigger!)
  </div>
</div>

<div class='smallbox'>
  Some content
  <div class='bigbox center top'>
    Some content (but bigger!)
  </div>
</div>

<div class='smallbox'>
  Some content
  <div class='bigbox right top'>
    Some content (but bigger!)
  </div>
</div>

<br><br>

<div class='smallbox'>
  Some content
  <div class='bigbox left middle'>
    Some content (but bigger!)
  </div>
</div>

<div class='smallbox'>
  Some content
  <div class='bigbox center middle'>
    Some content (but bigger!)
  </div>
</div>

<div class='smallbox'>
  Some content
  <div class='bigbox right middle'>
    Some content (but bigger!)
  </div>
</div>
<br> <br>
<div class='smallbox'>
  Some content
  <div class='bigbox bottom left'>
    Some content (but bigger!)
  </div>
</div>
<div class='smallbox'>
  Some content
  <div class='bigbox bottom center'>
    Some content (but bigger!)
  </div>
</div>
<div class='smallbox'>
  Some content
  <div class='bigbox bottom right'>
    Some content (but bigger!)
  </div>
</div>

【讨论】：