當懸停時在div上改變圖像時，圖像被切掉

我試圖在用戶將鼠標懸停在圖像上時進行圖像更改，但我使用的方法似乎切斷了圖像，未顯示所有圖像。我怎樣才能讓它按照我指定的尺寸縮放圖像，而不是僅僅製作那個尺寸的div並切掉其餘的尺寸？當懸停時在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網址看到，圖像應該是一個保存圖標，但它會切斷除左上方以外的所有內容。

來源

2015-05-05 KoftaClarence

將「background-size：contains」添加到您的兩個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; 
}

來源

2015-05-05 20:12:48

這工作：

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

我不僅改變了寬度和高度兩個類

來源

2015-05-05 20:14:11 zawar

當懸停時在div上改變圖像時，圖像被切掉

回答

相關問題