在悬停时以最大宽度变换比例“缩放”？

Question

编辑:: 已解决，而不是使用变换，更改背景大小有效，谢谢大家。

我正在尝试转换其中一个 div 的比例，同时保持最大宽度，例如缩放效果，但是它忽略了最大宽度？

.Img2 {
  position: relative;
  height: 300px;
  display: inline-block;
  width: 400px;
  float: left;
  padding: 0;
  cursor: pointer;
}
.box2 {
  height: 300px;
  max-width: 400px;
  width: 400px;
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-color: black;
}
.box2:hover {
  transform: scale(1.03);
}

<li class="Img2">
  <div class="box2"></div>
</li>

Answer 1

来自MDN article on CSS transforms：

通过修改坐标空间，CSS 变换可以改变受影响内容的形状和位置，而不会中断正常的文档流。

这就是您的transform: scale() 不受max-width 约束影响的原因。相反，您需要scale 高度（Y 维度），同时保持宽度（X 维度）相同（read more）。请参阅下面的更新示例：

.Img2 {
    position: relative;
    height: 300px;
    display: inline-block;
    width: 400px;
    float: left;
    padding: 0;
    cursor: pointer;
}
.box2 {
    height: 300px;
    max-width: 400px;
    width: 400px;
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-color: black;
}
.box2:hover {
    transform: scale(1, 1.03);
}

<li class="Img2">
    <div class="box2"></div>
</li>