html - 親の高さに基づいて画像を動的にトリミングする方法

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

あなたのケースで可能であれば、画像を HTML に配置する代わりに div の背景として設定すると、望ましい効果が得られます

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