Когда изображение в div изменяется при наведении, изображение обрезается

Question

Я пытаюсь сделать смену изображения, когда пользователь на него нависает, но метод, который я использовал, как бы отрезал изображение, не показывая его все , Как я могу масштабировать изображение до размера, который я указываю, вместо того, чтобы просто сделать div таким размером и отрезать все остальное?

HTML:

<div class="navbar-image" id="navbar-image-ID2Games"> 
</div> 

CSS:

#navbar-image-ID2Games { 
    width: 5rem; 
    height: 5rem; 
    background-repeat: no-repeat; 
    background: url(http://i.imgur.com/Ou5cX4D.png); 
} 

#navbar-image-ID2Games:hover { 
    width: 5rem; 
    height: 5rem; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat; 
} 

Смотрите здесь: https://jsfiddle.net/7a7ghfw4/

Как вы можете видеть из Imgur URL, изображение должно быть сохранить значок, но он отсекает все, кроме левого верхнего.

Answer 1

Добавить "background-size: содержать" в оба правила css.

#navbar-image-ID2Games { 
    width: 5rem; 
    height: 5rem; 
    background-repeat: no-repeat; 
    background: url(http://i.imgur.com/Ou5cX4D.png); 
    background-size: contain; 
} 

#navbar-image-ID2Games:hover { 
    width: 5rem; 
    height: 5rem; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat; 
    background-size: contain; 
} 

Answer 2

Это работает:

#navbar-image-ID2Games { 
    width: 265px; 
    height: 265px; 
    background-repeat: no-repeat; 
    background: url(http://i.imgur.com/Ou5cX4D.png); 
} 

#navbar-image-ID2Games:hover { 
    width: 265px; 
    height: 265px; 
    background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat; 
} 

Я только изменил ширину и высоту для обоих классов