Question

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

我试图在保持最大宽度的同时转换其中一个div的比例，就像缩放效果一样，但它会忽略最大宽度？

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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>

转换比例＆＃34;缩放＆＃34;悬停时最大宽度是多少？

1 个答案: