CSS放大懸停圖像

Question

我對編碼相當陌生，目前我正在使用包含圖像的網頁。我想讓這些圖像在頁面上顯示得很小，但是當你將它們懸停在它們上時，它們會放大。我正在使用的這個代碼正在工作，但有一個我似乎無法解決的小問題。這是我使用的CSS代碼：

#image img { 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
#image:hover img { 
    width: 200%; 
    height: 200%; 
} 

我遇到的問題是，如果我不使用CSS浮動功能時，圖像也會被你徘徊在同一垂直放大高度作爲圖像，而不是必須懸停在相同的水平位置，這是非常煩人的。我不想讓它浮動：因爲這會干擾我的其他頁面。我真的很想得到一些幫助，因爲無論我做什麼，似乎都無法解決問題。預先感謝幫助我。

編輯：HTML代碼：

<div id = "image"> 
    <img src = "image.png" alt = "image example"> 
</div> 

Answer 1

整體上。不要使用ID標籤作爲選擇器，而應使用class。 The will catch you out ... read more

讓你的圖像縮放到包裝它的div，然後控制包裝div。而且，你不應該沒有問題。

.image-wrapper img { 
    max-width: 100%; 
} 
.image-wrapper { 
    width: 100%; 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
.image-wrapper:hover { 
    width: 200%; 
    height: 200%; 
} 

Answer 2

從

#image img { 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
#image:hover img { 
    width: 200%; 
    height: 200%; 
} 

更改代碼

#image img { 
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s; 
} 
#image img:hover { 
    width: 200%; 
    height: 200%; 
} 

解決了這個問題。感謝您的幫助（尤其是@Ariel）！