Estou tentando aplicar um evento de mouseover para transformar uma imagem original em uma nova imagem e, em seguida, retornar à imagem original ao remover o mouse. No entanto, os arquivos de imagem originais são muito grandes, então estou usando uma classe de contêiner para exibi-los no tamanho desejado.
O problema é que quando passo o mouse sobre a imagem, ela exibe a nova imagem, mas ela está no tamanho original, em vez de estar dentro das restrições do contêiner.
const imageContainer = document.querySelector('.flex-container');
const image = document.getElementById('bookCover2');
const originalSrc = 'Book_2_Cover.png';
const newSrc = 'Book_2_Back.png';
imageContainer.addEventListener('mouseover', () => {
image.src = newSrc;
});
imageContainer.addEventListener('mouseout', () => {
image.src = originalSrc;
});