在最大寬度懸停時變換縮放「縮放」？

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限制。相反，您需要在保持寬度（X尺寸）相同的情況下（read more）高度（Y尺寸）爲scale。請參見下面更新例如：

.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>