javascript - メイン画像のサイズが変更されたときにトップ画像の位置を維持する

Question

メイン画像とメイン画像の上に小さな吹き出しボタンがあります。max-width主な画像サイズがとでサイズ変更されている間に画面サイズが変更されたときに、吹き出しボタンの位置を維持しようとしていますが、background-size: contain現在、吹き出しボタンの位置が変わります。

CSSは次のとおりです。

.main_image
{
   background: red;
   height: 400px;
   background-size: contain;
   position: relative;
   max-width: 100%;
}

.callouts
{
   background-image: url(http://www.autotintspecialist.com/zoomButton_moused.png);
   height: 70px;
   width: 40px;
   height: 30px;
   position: absolute;
   top: 70px;
   right: 180px;
}

HTMLは次のとおりです。

<div>
   <img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
</div>
<div class="callouts"></div>

フィドルへのリンクは次のとおりです。http://jsfiddle.net/Nem2C/

画像のサイズを変更すると、吹き出しボタンの位置が変わりますが、画像のサイズが変更されたときに位置を維持する必要があります。

これに対するjqueryソリューションまたはjavascriptソリューションもありますか?