如何根據父級高度動態裁剪圖像

Question

.imageButton { 
     width: 14px; 
     height: 50px; 
    } 
    .divClass{ 
     width:100px; 
     height: 30px; 
    } 

<div class="divClass"><img class="imageButton" /></div> 

這裏的.divClass的高度是dynamic.Now我的問題是顯示需要根據div的高度裁剪此圖像。例如： - 如果div的高度是30那麼img需要裁剪top-((img's height-div's height)/2)和bottom-((img's height-div's height)/2)

如何實現這一目標？

Answer 1

高度和寬度適用100％圖像

.imageButton { 
    width: 100%; 
    height: 100%; 
} 

您可以根據您的需要調整高度和寬度。如果你希望它是半父母的高度或寬度

希望對大家有所幫助

謝謝

Answer 2

如果有可能你的情況設置圖像作爲div的背景，而不是你可以指定它50％把它放在HTML中會產生預期的效果

.divClass { 
    background: transparent url('imageButton.png') 50% 50% no-repeat; 
}