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

添加＆＃34;背景大小：包含＆＃34;对你的两个css规则。

{{1}}

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; 
}

我只更改了两个类的宽度和高度

当div中的图像在悬停时改变时，图像被切断

2 个答案: