Skalierung "Zoom" bei Hover mit maximaler Breite?

Question

EDIT :: Gelöst, anstatt zu transformieren, ändern die Hintergrund-Größe gearbeitet, danke euch allen.

Ich versuche, die Skalierung von einem der divs zu transformieren, während eine maximale Breite beibehalten wird, wie ein Zoom-Effekt, jedoch ignoriert es die maximale Breite?

.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

Vom MDN article on CSS transforms:

durch den Raum koordinieren zu modifizieren, transformiert CSS die Form und Position des betroffenen Inhalts ändern, ohne den normalen Dokumentenfluss zu stören.

Deshalb ist Ihre transform: scale() nicht von Ihrer max-width Einschränkung betroffen. Stattdessen möchten Sie scale die Höhe (Y-Dimension) unter Beibehaltung der Breite (X-Dimension) gleich (read more). Siehe aktualisierte Beispiel unten:

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