Шкала преобразования «Масштаб» при наведении с максимальной шириной?

Question

EDIT :: Решено, вместо того, чтобы использовать преобразование, сменив размер фона, спасибо всем.

Я пытаюсь преобразовать масштаб одного из 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>