Html 增加悬停时的宽度，在方形填充顶部：100%div

我试图增加悬停时div的宽度，同时保持高度不变。这很难，因为我从填充顶部获得高度：100%，这允许它是一个可调整大小的正方形。所以当我增加宽度时，高度自然也会增加。（重要的是，div的高度和宽度在正常状态下相等，因此它是一个完美的正方形）

我现在不知所措，不知道如何做到这一点，任何意见都是非常感谢的

---

您可以使用视口单位并去掉工作包装器，如下所示：

。工作容器{
宽度：30vw；
高度：30vw；
过渡：全部缓解0.5s；
}
.工作容器：悬停{
宽度：50vw；
}
.工作-1{
背景色：#FEF102；
}

---

首先，您可以去掉百分比并将其添加到“.work wrapper”：

保持一切不变！

---

希望这有帮助

如果您不想将“固定宽度和高度”设置为

。work wrapper

，则。。 将

.work容器

设为悬停元素，并执行以下操作：

。工作包装器{
宽度：30%；
}
.工作容器{
填充顶部：100%；
宽度：100%；
过渡：全部缓解0.5s；
}
.工作容器：悬停{
宽度：200%；
}
.工作-1{
背景色：#FEF102；
}

因此您需要

padding top

属性，因为您将div的宽度设置为容器的30%，容器没有绝对大小，并且希望高度相同？是的，在正常状态下，宽度和高度必须相同。我会说得更清楚。只是你友好的提醒，如果你看到一个正确的答案，就选择一个正确的答案——这对每个人都有一点帮助！别忘了，我现在正在玩弄Jefsama的答案。有用的提示，但不幸的是，它在另一个div中，它的%不是基于视口宽度。看起来是最好的答案，我会看看它是否有效，然后回来标记它是否正确：）希望我的答案是最适合您需要的：）当然是，不确定我怎么没有想到这一点。非常感谢。谢谢，但它需要完全响应，因此%值。

.work-container { padding-top: 100%; }

width:150px;
height:150px;
overflow: hidden;