html - 如何根据其父高度动态裁剪图像

Question

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

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

这里 .divClass 的高度是动态的。现在我的问题是在显示时需要根据 div 的高度裁剪此图像。例如：- 如果 div 的高度为 30，则需要裁剪 imgtop-((img's height-div's height)/2)并bottom-((img's height-div's height)/2)

如何做到这一点？

Answer 1

将 100% 的高度和宽度应用于图像

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

您可以根据需要调整高度和宽度。如果您希望它是父母高度或宽度的一半，您可以将其指定为 50%

希望它会有所帮助

谢谢

Answer 2

如果在您的情况下可以将图像设置为 div 的背景而不是将其放置在 HTML 中会产生预期的效果

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