divの下端からの画像の距離に応じて余白を調整します

Question

画像をサイズ変更するJavaScript関数をPHPで動的に生成し、divを含むdivの幅と高さを埋め込むようにしました。残念ながら、私は画像の幅と高さの比を制御することはできませんし、歪んで現れることなくdivの高さをカバーするために画像を伸ばすことはできませんでした。

私の解決策は、javascriptを使用して余白トップのCSSパラメータを追加し、画像の下端とdivの高さの間の残りの部分をそのパラメータの値に割り当てることです（例：maxHeight -imageHeight）。ただし、このメソッドを使用すると、イメージはdivの境界を超えて消えます。

誰かがこれに対する解決策を持っているのだろうかと思っていました。それを行うより良い方法か、この方法を動作させる方法のどちらかです。

Answer 1

divで画像を塗りつぶすには、divのサイズに近い画像の幅または高さで塗りつぶす必要があります。

.imageInDiv{ 
    width: 100%; 
    height: 100%; 
    max-width: 100%; 
    max-height: 100%; 
    } 

そして、あなたはあなたのイメージがそれの中心になりたい場合は、親のdivです：

.parentDiv{ 
    display:flex; 
    display: -webkit-flex; 
    justify-content:center; 
    -webkit-justify-content:center; 
    align-items:center; 
    -webkit-align-items:center; 
}