resize image CSS

.resize {
height: 25%;
width: auto;
}   
<img src="image/1.jpg" class="resize" />


Når jeg bruger ovenstående, så sker der intet med billedet - den vises som normal størrelse. Hvis jeg derimod vender den om
.resize {
height: auto;
width: 25%;
}
Så resizes billedet til 25% af normal størrelse.

Hvorfor dur den første ikke? Er det ikke ligemeget om man resizer x eller y-aksen? Hvad gør jeg galt i den første?