css - Overflow:hidden を使用した垂直方向の画像の中央揃え

Question

<div style="overflow:hidden; height:100px; width:100px;">
<img src="etc.jpg" width:"100px" /></div>

私は に を持ってimgいdivます。の高さimgは未定義ですが、 の 100px より大きいですdiv。

img上下のオーバーフローを垂直方向に中央揃えして非表示にしたい。

いまいちやり方が理解できません…。

ダニエレ

Answer 1

画像の margin-top プロパティを負のパーセンテージで設定してみることができます。例えば;

div img {margin-top: -50%;}

パーセンテージ値をいじるだけで、うまくいくものが見つかるはずです。

Answer 2

これはうまくいきますか？

 <div style="overflow:hidden; height:100px; width:100px;">
   <image src="etc.jpg" style="width:100px; position: relative; bottom: 25%;" />
 </div>

うーん、画像が収まる場合、結果は少し奇妙です