CSSで親要素の一番下に画像を配置したい

Question

親要素の一番下に子要素として配置している画像を言ったり合わせて配置したいです。

<div class="inner">
    /* その他コンテンツ内容 */
　  <div class="image>
      <img src="/img.png"/>
   </div>
</div>
/* その他コンテンツ内容2 */

.inner{
   width: 90%;
   margin: auto;
   border-radius: 20px;
   border: 3px solid #AAAAAA;
   background-color: white;
}

.image img{
   width: 100%;
   bottom: 0;
}

innerの枠線に合わせるように一番下に画像を配置したいのですが、現状上下左右に余白がある状態です。

imageの外にもう一つdivで囲んでheightを指定し、topで指定すれば希望の位置に移動はするのですが、画面サイズが変わると位置もズレます。

また、今の状態をDevToolsで見るとimgの余白がその他コンテンツ内容やその他コンテンツ内容２に重なっていました。

どうすれば画面サイズが変わっても親要素の一番下に画像が配置されるのでしょうか？
（画像の大きさ自体は画面サイズに合わせて変化してほしいのでwidth: 100%;にしています。）

どなたかご教授いただけますと幸いです。

Comments

[s8_chu]

左右に余白がないように見えますが、問題になっているのは上下のみではありませんか？
https://jsfiddle.net/ghjoexu3/

[退会済みユーザー]

せっかく見て頂いたのにすみません、自己解決できました。
ご助言ありがとうございました。

Answer 1

使用しようとしていた画像自体に余白がついていました・・・
残った若干の余白は

.inner{
　 transform: translateY(3px);
   margin-bottom: 0;
   padding: 0;
   border: 0;
   bottom: 0;
}

を追加したら出来ました。