Question

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

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

这里.divClass的高度是动态的。现在我的问题是显示需要根据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%;
}

您可以根据需要调整高度和宽度。如果你想让它成为父母身高或宽度的一半

，你可以指定它50％

希望它能帮助

谢谢

Answer 2

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

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

如何根据父级高度动态裁剪图像

2 个答案: